正则表达式

最新推荐文章于 2022-05-25 11:03:15 发布

一麻袋小猫

最新推荐文章于 2022-05-25 11:03:15 发布

阅读量110

点赞数

分类专栏： JavaScript ES6 文章标签： javascript

本文链接：https://blog.csdn.net/Zmongo/article/details/104818611

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

ES6

14 篇文章 0 订阅

订阅专栏

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
灵活性、逻辑性和功能性非常强。

创建正则表达式

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

通过调用RegExp对象的构造函数创建

 //利用RegExp来创建
        var regexp = new RegExp(/123/);
        console.log(regexp);

通过字面量创建
var 变量名 = /表达式/ ;
var rg = /123/;
测试正式表达式 test
test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其参数是测试字符串。

 //test方法用来检测字符串是否符合正则表达式要求的规范
        var rg = /123/;
        console.log(rg.test('ac'));

正则表达式的组成

正则测试工具：https://tool.oschina.net/regex

边界符

如果是^和$一起必须是精确匹配
字符类： [] 表示有一系列字符可供选择，只要匹配其中一个就可以了
[a - z] 表示范围
如果中括号里面有^表示取反的意思，要和边界符 ^ 别混淆
量词符

/^[a-zA-Z0-9_-]{6,16}$/

用户名验证

<style>
        span {
            color: #aaa;
        }
        
        .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}$/;
        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>

括号总结
中括号字符集合匹配方括号中的任意字符（只选一个）

大括号量词符.里面表示重复次数
var reg = /^abc{3}$/ 只是让c重复3次
abccc

小括号表示优先级

var reg = /^(abc){3}$/; //它是让abc重复三次

在线测试：http://c.runoob.com/

预定义类

预定义类指的是某些常见模式的简写方式。
在这里插入图片描述

 //正则里面或者的符号 |

正则表达式中的替换

replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式
在这里插入图片描述
正则表达式参数

在这里插入图片描述

 <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>单击</button>
    <div></div>
    <script>
        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>