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

最新推荐文章于 2021-03-19 23:18:31 发布

Lindsay_0425

最新推荐文章于 2021-03-19 23:18:31 发布

阅读量667

点赞数

分类专栏： JavaScript 基础及高级文章标签：正则表达式 javascript regex

本文链接：https://blog.csdn.net/weixin_47297666/article/details/108834586

版权

JavaScript 基础及高级专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

Lindsay_0425

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
10【JS 正则表达式】Regular Expression 匹配字符串中字符的组合；表单验证，获取字符串中特定部分，过滤敏感词

10【正则表达式】Regular Expression 匹配字符串中字符的组合作用：表单验证：（匹配）用户名表单只能输入英文，数字，下划线；昵称可以输入中文等获取字符串中特定部分：（提取）过滤敏感词：（替换）为** 或者空特征：灵活性，逻辑性，功能性强，简单字符串达到复杂的控制1，创建：RegExp: var regexp = new RegExp(/123/); 麻烦字面量：var rg = /123/;2,测试正则表达式：testregexObj..
复制链接

扫一扫