javascript高级(4)

2023-01-31 22:52:07

正则表达式

正则表达式是一个对象，主要是用于匹配字符串中字符组合的模式。

正则表达式的特点

可过滤页面内容的一些敏感词
从字符串获取我们想要的特定部分。

创建正则表达式

在javascript中，可以通过两种方式创建正则表达式

test()是正则表达式对象的方法，用来检验字符串是否符合该规则，返回值为true或者false.4

注意：正则表达式不需要加引号，不管是字符串或值型

1.通过RegExp对象的方式创建正则表达式

var 变量名 = new RegExp(/表达式/)

2.通过字面量创建

var 变量名 = /表达式/

注释中间放表达式就是正则表达式字面量



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则表达式</title>
</head>
<body>

</body>
<script>
  //1.利用RegExp对象来创建正则表达式
  let regexp = new  RegExp(/123/);
  console.log(regexp)


  //2.利用字面量的方式来创建
  let regexp2 = /123/;
  console.log(regexp2)

  //test()方法用来检验字符串参数是否符合正则表达式的规则
  console.log(regexp.test(123));
  console.log(regexp2.test(123));
</script>
</html>

正则表达式组成

一个正则表达式可以由简单的字符组成，比如/abc/,也可以是简单与特殊字符的组合，如 ^ 、$ 、+ 等。

特殊字符非常多，可以参考：

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
jQuery 手册：正则表达式部分
正则测试工具:https://tool.oschina.net/regex
特殊字符也别称为元字符

边界符

正则表达式中的边界符（位置符）用来提示字符所在的位置，主要有两个字符

如果^与$同时存在，则代表精准匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式之边界符</title>
</head>
<body>

</body>
<script>
    let regexp = /abc/;
    //test()方法里面的参数只要包含abc字符，即为true
    console.log(regexp.test('abc'))//true
    console.log(regexp.test('abcd'))//true
    console.log(regexp.test('abcde'))//true

    let regexp2 = /^abc/
    //test()方法里面的参数必须以abc开头，即为true
    console.log(regexp.test('abc'))//true
    console.log(regexp.test('bacd'))//false
    console.log(regexp.test('abcde'))//true

    let regexp3 = /^abc$/
    //test()方法里面的参数必须是abc，即为true
    console.log(regexp.test('abc'))//true
    console.log(regexp.test('bacd'))//false

</script>
</html>

字符类

[]：表示有一系列的字符可以选择，只要匹配其中一个便可以了


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式之字符类</title>
</head>
<body>

</body>
<script>
    let regexp = /[abc]/ //只需包含a或b或c的字符 返回值即可true
    console.log(regexp.test('name'));
    console.log(regexp.test('body'));
    console.log(regexp.test('chinese'));
    console.log('-----------------------------------')
    
    
    
    let regexp2 = /^[abc]$/ //三选一，只能是a或b或c中的任意字符,返回值为true.
    console.log(regexp2.test('a'));
    console.log(regexp2.test('b'));
    console.log(regexp2.test('c'));
    console.log(regexp2.test('d'));//false
    console.log('-----------------------------------')
    
    
    

    let regexp3 = /^[a-z]$/ //多选一，只能是26个小写字母中任意一个字符,返回值为true.
    console.log(regexp3.test('a'));
    console.log(regexp3.test('b'));
    console.log(regexp3.test('c'));
    console.log(regexp3.test('d'));
    console.log('-----------------------------------')
    
    
    

    let regexp4 = /^[a-zA-Z0-9_-]$/ //多选一，只要是26个小写字母或26个大写字母或0-9和_-中任意一个字符,返回值为true.
    console.log(regexp4.test('A'));
    console.log(regexp4.test('b'));
    console.log(regexp4.test('0'));
    console.log(regexp4.test('!')); //false
    console.log('-----------------------------------')
    
    
    


    let regexp5 = /^[^a-zA-Z0-9_-]$/ //多选一，[]里面的^是取反的意思，只要不是[]里面的字符 都为true
    console.log(regexp5.test('A'));
    console.log(regexp5.test('b'));
    console.log(regexp5.test('0'));
    console.log(regexp5.test('!')); //true
    console.log('-----------------------------------')
    

</script>
</html>

量词

量词是用来设定某个模式出现的次数


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正则表达式之量词</title>
    </head>
    <body>

    </body>
    <!--量词符用来设定某个模式出现的次数-->
    <script>
        let regexp = /^a$/
        console.log(regexp.test('a'))
        console.log(regexp.test('aa')) //false
        console.log('----------------------------------------------')



        let regexp1 = /^a*$/ // *相当>=0,，可以出现0次或多次
        console.log(regexp1.test('a'))
        console.log(regexp1.test('aa'))
        console.log('----------------------------------------------')


        let regexp2 = /^a+$/ // +相当>=1,，可以出现1次或多次
        console.log(regexp2.test('')) //false
        console.log(regexp2.test('a'))
        console.log(regexp2.test('aa'))
        console.log('----------------------------------------------')



        let regexp3 = /^a?$/ // ？相当0|| 1次,
        console.log(regexp3.test(''))
        console.log(regexp3.test('a'))
        console.log(regexp3.test('aa')) //false
        console.log('----------------------------------------------')


        let regexp4 = /^a{3}$/ // {3}可以出现3次
        console.log(regexp4.test('')) //false
        console.log(regexp4.test('a')) //false
        console.log(regexp4.test('aaa'))
        console.log('----------------------------------------------')



        let regexp5 = /^a{3,}$/ // {3,}可以出现3次或大于3次
        console.log(regexp5.test('')) //false
        console.log(regexp5.test('aaa'))
        console.log(regexp5.test('aaaaaa'))
        console.log('----------------------------------------------')


        let regexp6 = /^a{3,16}$/ // {3,16}可以出现3到16次
        console.log(regexp6.test('')) //false
        console.log(regexp6.test('aaa'))
        console.log(regexp6.test('aaaaaaaaaaaaaa'))
        console.log('----------------------------------------------')
    </script>
</html>

量词的延伸


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>正则表达式之量词</title>
    </head>
    <body>

    </body>
    <script>
        let regrxp = /^[a-zA-Z0-9_-]{6,16}$/; //输入的自述为6~16位之间 且正则表达式里面的匹配字符要完全符合
        console.log(regrxp.test('a'))//false
        console.log(regrxp.test('andy2020'))
        console.log(regrxp.test('andy202020'))
        console.log(regrxp.test('YaoZiMo'))
    </script>
</html>

正则表达式之表单验证

核心思路

1.用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.

2.首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/

3.当表单失去焦点就开始验证.

4.如果符合正则规范, 则让后面的span标签添加 right 类.

5.如果不符合正则规范, 则让后面的span标签添加 wrong 类.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正则表达式之表单验证</title>
        <style>
            * {
            margin: 0;
            padding: 0;
        }
        span {
            color: #aaa;
            font-size: 14px;
        }
        .right {
            color:green;
        }
        .wrong {
            color: red;
        }
    </style>
    <body>
        <input type="text" class="ipt"> <span>请输入用户名</span>

    </body>
    <script>
        //1.获取元素
        var ipt = document.querySelector('.ipt')
        var span = document.querySelector('span')

        //2.正则表达式的匹配规则
        let regrxp = /^[a-zA-Z0-9_-]{6,16}$/;
        //3.设置鼠标失去焦点事件
        ipt.onblur = function() {
            if (regrxp.test(ipt.value)) {
                span.className = 'right'
                span.innerHTML = '用户输入的用户名格式正确'
            } else {
                span.className = 'wrong'
                span.innerHTML = '用户输入的用户名的格式不正确'
            }

        }
    </script>
</html>

括号总结

大括号：量词符，里面表示匹配次数

中括号：字符集合。匹配方括号里面的任意字符

小括号：表示优先级

在线测试:https://c.runoob.com/

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式之括号总结</title>
</head>

<body>

</body>
<script>
    // 中括号：字符集合，匹配方括号里面的任意字符
    var ragExp = /^[abc]$/
    console.log(ragExp.test('a'));
    console.log(ragExp.test('b'));
    console.log(ragExp.test('c'));

    // 大括号 设定模式的匹配次数
    var ragExp1 = /^abc{3}$/
    console.log(ragExp1.test('a')); //false
    console.log(ragExp1.test('b')); //false
    console.log(ragExp1.test('abccc'));

    // 小括号 表示优先级
    var ragExp2 = /^(abc){3}$/
    console.log(ragExp2.test('a')); //false
    console.log(ragExp2.test('b')); //false
    console.log(ragExp2.test('abcabcabc'));//true
</script>

</html>

预定义类

预定义类指的是某些常见模式的简写方式

座机号码验证

座机号码验证: 全国座机号码两种格式: 010-12345678 或者 0530-1234567


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式之座机号码验证</title>
</head>
<body>
</body>
<script>
    // 座机号码验证: 全国座机号码  两种格式:   010-12345678 或者 0530-1234567
 var regExp = /^d{3,4}-d{7,8}$/
</script>
</html>

表单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>正则表达式之表单验证</title>
    <style>
        body {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .nav {
            list-style: none;
            width: 600px;
            padding: 20px;
            margin: 200px auto;
            border: 1px solid black;

        }

        .nav li {
            margin-bottom: 20px;
        }

        lable {
            display: inline-block;
            width: 80px;
        }
        span {
            margin-left:20px;
        }
        input[type='submit'] {
            margin-left: 96px;
            margin-right: 50px;
        }
        .right {
            color: green;
        }
        .wrong {
            color: red;
        }
    </style>
</head>
<body>
<form action="Yao.php"></form>
<ul class="nav">

    <li>
        <lable for="">用户名：</lable>
        <input type="text" class="user"><span></span>
    </li>

    <li>
        <lable for="">密 码:</lable>
        <input type="password" class="password"><span></span>
    </li>
    <li>
        <input type="submit" value="登陆"> <input type="reset" value="提交">
    </li>
</ul>

</body>
<script>
    var user = document.querySelector('.user')
    console.log(user)
    var password = document.querySelector('.password');
    console.log(password)
    var regexp = /^[a-zA-Z0-9_-]{6,16}$/;
    var regexp2 = /\w{3,20}$/;
    user.onblur = function() {
        if(regexp.test(user.value)){
            console.log(11);
            this.nextElementSibling.className='right'
            this.nextElementSibling.innerHTML='通过'
        }else {
            this.nextElementSibling.className='wrong'
            this.nextElementSibling.innerHTML='不通过'
        }
    }
    password.onblur = function() {
        if(regexp.test(password.value)){

            this.nextElementSibling.className='right'
            this.nextElementSibling.innerHTML='通过'
        }else {
            this.nextElementSibling.className='wrong'
            this.nextElementSibling.innerHTML='不通过'
        }
    }
</script>
</html>

正则表达式中的替换

-replace 替换
stringObject.replace(regexp/substr,replacement)

第一个参数: 被替换的字符串或者正则表达式

第二个参数: 替换为的字符串

返回值是一个替换完毕的新字符串


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正则表达式中的替换</title>
    </head>
    <body>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>提交</button>
        <div></div>
    </body>
    <script>
        var text= document.querySelector('textarea')
        var bth = document.querySelector('button');
        var div = document.querySelector('div')
        bth.onclick = function(){
            div.innerHTML =text.value.replace(/大傻瓜|铁憨憨/g,'**')
        }
    </script>
</html>

修饰符

/表达式/[switch]

switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：

g：全局匹配
i：忽略大小写
gi：全局匹配 + 忽略大小写

码农公寓