JS常用系统方法和正则表达式

最新推荐文章于 2024-07-29 11:53:27 发布

月亮1打烊了

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量80

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Xyh9375/article/details/132587711

版权

字符串

1. length 属性返回字符串的长度(字符数)。

var str = "王五,李四,孟达,马六,牛马,张三,pass";
        console.log(str.length);

下标是从0开始的，不管是文字还是标点还是特殊符号都在字符串里边
js当中字符串是不可变的，所以不管使用什么字符串里面自带的方法都不会改变原有的字符串

2. 在字符串中查找字符串 indexOf()

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.indexOf("五"));

1.作用就是查找字符串
2.如果当前字符串中存在该数字那么返回的是该字符的下标
3.如果当前字符串中不存在该字符那么返回的是-1
4.如果不止一个字符也就是存在多个情况下，返回的是从左往右数最近的那一个字符的下标

3.Lastindexof查找字符串

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.lastIndexOf("五"));

Lastindexof查找字符串不存在的情况下返回-1，如果存在他查找的顺序是从右往左数第一个。
注意事项：下标永远都不会改变，顺序是从左往右。

4.math 查找字符串

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.match("六"));

如果该字符在字符串中存在会返回一个数组，里面包含找到的该字符串，该字符串的下标整个字符串都会被返回

5.replace 替换内容

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.replace("六","艺"));

6.toUpperCase 英文转大写

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.toUpperCase());

7.toLowerCase 英文转小写

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.toLowerCase());

8.toString将number类型转换为string类型（）内的可以转换进制

var num = 1234.50;
        console.log(num.toString(2));

9.Number将任意类型转换为number类型

var bool = true;
        console.log(Number(bool));

可以使用typeof查看现在的类型

10.split 将字符串转换为数组分割字符串然后回复相应的数组内容

var str = "王五,李四,孟达,马六,牛马,张五,pass";
console.log(str.split(","));

math

1.math.ceil（）向上取整

var num = 1234.50;
console.log(Math.ceil(num));

2.Math.floor() 向下取整

var num = 1234.50;
console.log(Math.floor(num));

3.Math.round 四舍五入

var num = 1234.50;
console.log(Math.round(num));

Date日期

创建方法

var time = new Date();
console.log(time);

1.getFullYear() 年

2.getMonth() 月

3.getDate() 日

4.getHours() 时

5.getMinutes() 分

6.getSeconds 秒

完整输出方式

var time = new Date();
document.write(time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+time.getHours()+"时"+time.getMinutes()+"分"+time.getSeconds()+"秒")
        console.log(time);

显示结果

在这里插入图片描述

正则表达式

1.什么是正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。

2.正则表达式的特点

灵活性、逻辑性和功能性非常的强。
可以迅速地用极简单的方式达到字符串的复杂控制。

简单的手机号正则表达式

正则表达式也可以在Visual Studio Code里边下载正则表达式的插件 any-rule

 手机号：<input type="text" id="phone">
    <button onclick="sub()">提交</button>
    <script>
        function sub(){
            var phone = document.getElementById("phone").value;
            var cellphone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
            
            if(cellphone.test(phone)){
                alert("验证成功");
            }else{
                alert("验证失败");
            }
        }
    </script>

登录页面小练习（正则表达式）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="bigbox">
        <div class="header">填写注册信息</div>
        <div class="subbox">
            <div class="user">用户名称:</div>
            <div class="menu">
                <form action="">
                    <input type="text" id="username" placeholder="长度4~12，英文大小写宇母">
                </form>
            </div>
        </div>
        <div class="subbox">
            <div class="user">密&emsp;&emsp;码:</div>
            <div class="menu">
                <form action="">
                    <input type="text" id="password" placeholder="长度6~20，大小写字母、数字或下划线">
                </form>
            </div>
        </div>
        <div class="subbox">
            <div class="user">确认密码:</div>
            <div class="menu">
                <form action="">
                    <input type="text" id="passwordd" placeholder="请再次输入密码进行确认">
                </form>
            </div>
        </div>
        <div class="subbox">
            <div class="user">手机号码:</div>
            <div class="menu">
                <form action="">
                    <input type="text" id="phone" placeholder="13、14、15、17、18开头的11位手机号">
                </form>
            </div>
        </div>
        <div class="subbox">
            <div class="user">身份证号:</div>
            <div class="menu">
                <form action="">
                    <input type="text" id="card" placeholder="18位身份证号">
                </form>
            </div>
        </div>
        <div class="subbox">
            <div class="user">电子邮箱:</div>
            <div class="menu">
                <form action="">
                    <input type="text" id="mailbox" placeholder="用户名@域名(域名后缀至少2个字符)">
                </form>
            </div>
        </div>
        <div class="register">
            <form action="">
                <button onclick="wyj()">注册</button>
            </form>
        </div>

    </div>
    <script>
        function wyj() {
            //用户名称
            var username = document.getElementById("username").value;
            var cellphone = /^[\w-]{4,16}$/;
            if (cellphone.test(username)) {
            } else {
                alert("用户名称验证失败");
            }
            //密码
            var password = document.getElementById("password").value;
            var cellphonem = /^[\w-]{4,16}$/;
            if (cellphonem.test(password)) {
            } else {
                alert("密码验证失败");
            }
            //确认密码
            var passwordd = document.getElementById("passwordd").value;
            var cellphonemn = /^[\w-]{4,16}$/;
            if (cellphonemn.test(passwordd)==cellphonemn.test(passwordd)) {
            } else {
                alert("确认密码验证失败");
            }
            
            //手机号
            var phone = document.getElementById("phone").value;
            var cellphonea = /^(13|14|15|17|18)\d{9}$/;
            if (cellphonea.test(phone)) {
            } else {
                alert("手机号验证失败");
            }
            //身份证号
            var card = document.getElementById("card").value;
            var cellphoneb = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
            if (cellphoneb.test(card)) {
            } else {
                alert("身份证号验证失败");
            }



            //电子邮箱
            var mailbox = document.getElementById("mailbox").value;
            var cellphonec = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
            if (cellphonec.test(mailbox)) {
            } else {
                window.alert("电子邮箱验证失败");
            }
            if(cellphone.test(username)&&cellphonem.test(password)&&cellphonemn.test(passwordd)&&cellphonea.test(phone)&&cellphoneb.test(card)&&cellphonec.test(mailbox)){
                alert("注册成功");
            }else{
                alert("注册失败")
            }

        }
    </script>
</body>

</html>mailbox

css内容

*{
    padding: 0;
    margin: 0;
}
.bigbox{
    background-color:#f1f3f6;
    margin: 0 auto;
    height: 700px;
    width: 500px;
}
.header{
    margin: 0 auto;
    font-size: 30px;
    color: #333;
    text-align: center;
}
.subbox{
    display: flex;
    height: 60px;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
}
.user{
    height: 40px;
font-size: 14PX;
line-height: 40px;
}
.menu input{
    height: 40px;
    width: 300PX;
    border-radius: 6px;
}
.register{
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
button{
    height: 40px;
    width: 120px;
    background-color: aqua;
    border-radius: 10px;
}

月亮1打烊了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS常用系统方法和正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。
复制链接

扫一扫