10【JS 正则表达式】Regular Expression 匹配字符串中 字符的组合; 表单验证,获取字符串中特定部分,过滤敏感词

10【正则表达式】

Regular Expression 匹配字符串中 字符的组合

作用:

表单验证:(匹配)用户名表单只能输入英文,数字,下划线;昵称可以输入中文等

获取字符串中特定部分:(提取)

过滤敏感词:(替换)为** 或者 空

特征:灵活性,逻辑性,功能性强,简单字符串达到复杂的控制

 

1,创建:

  • RegExp: var regexp = new RegExp(/123/); 麻烦
  • 字面量:var rg = /123/;

 

2,测试正则表达式:test

  • regexObj.test(str); regexObj-创建的正则表达式名;str-要测试的文本

 

3,边界符号:

  • ^ 以什么开头
  • $ 以什么结尾

 

4,字符类

  • [ ] 表示 有一系列字符可供选择,只要匹配其中一个就可以了

 

5, 量词符

  • 用来定义某个模式出现的次数

 

6,案列:用户名验证:

  • 功能需求:

(1)如果用户名输入合法,后边提示信息为:用户名合法,并且颜色为绿色

(2)如果用户名输入不合法,后边提示信息为:用户名不合法,并且颜色为红色

【分析】用户名只能为英文字母,数字,下划线或者短横线组成,并且用户名长度为6-16位;

准备好正则表达式: var reg = /^[a-zA-Z0-9_-]{6,16}$/

表单失去焦点时开始验证,如果符合规范,则让后边的span 标签 添加 right类,如果不符合,则让后边span标签添加wrong

 

7,括号总结

(1)大括号{ } 量词符 里边表示重复次数

(2)中括号[ ] 字符合集,匹配方括号中的任意字符

(3)小括号( ) 表示优先级

 

8, 预定义类

某些常见的简写模式

加了限定符^ $就只能匹配一个

 

9, 案列:座机号码验证

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

// 里面的或者   |  

 // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;

var reg = /^\d{3,4}-\d{7,8}$/;

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        span {

            color: #aaa;

            font-size: 14px;

        }

        

        .right {

            color: green;

        }

        

        .wrong {

            color: red;

        }

    </style>

</head>



<body>

    <input type="text" class="uname"> <span>请输入用户名</span>

    <script>

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

        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1

        // {6,16}  中间千万千万千万 ~~~!!!不要有空格

        // console.log(reg.test('a'));

        // console.log(reg.test('8'));

        // console.log(reg.test('18'));

        // console.log(reg.test('aa'));

        // console.log('-------------');

        // console.log(reg.test('andy-red'));

        // console.log(reg.test('andy_red'));

        // console.log(reg.test('andy007'));

        // console.log(reg.test('andy!007'));

        var uname = document.querySelector('.uname');

        var span = document.querySelector('span');

        uname.onblur = function() {

            if (reg.test(this.value)) {

                console.log('正确的');

                span.className = 'right';

                span.innerHTML = '用户名格式输入正确';

            } else {

                console.log('错误的');

                span.className = 'wrong';

                span.innerHTML = '用户名格式输入不正确';

            }

        }

    </script>

</body>



</html>

 

10. 替换

  • ~.replace(被替换的,替换成啥):

只能替换第一个满足条件的;但是正则表达式后可以有参数

g: 全局匹配

i忽略大小写

gi 全局匹配 + 忽略大小写

  • 过滤敏感词


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        textarea {

            width: 300px;

            height: 100px;

            border: 1px solid #ccc;

        }

    </style>

</head>



<body>

    <textarea name="" id="message"></textarea> <button>提交</button>

    <div></div>

    <script>

        // 替换 replace

        // var str = 'andy和red';

        // var newStr = str.replace('andy', 'baby');

        // var newStr = str.replace(/andy/, 'baby');

        // console.log(newStr);

        var text = document.querySelector('textarea');

        var btn = document.querySelector('button');

        var div = document.querySelector('div');

        btn.onclick = function() {

            div.innerHTML = text.value.replace(/激情|gay/g, '**');

        }

    </script>

</body>



</html>

 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页