正则表达式（详细了解）

jokermelove__

已于 2023-04-09 12:14:10 修改

阅读量124

点赞数

文章标签：正则表达式功能测试

于 2023-04-09 12:11:14 首次发布

本文链接：https://blog.csdn.net/jokermelove__/article/details/130039692

版权

P.S.正则表达式一般是不需要我们自己会敲的，但是我们需要了解规则，从而才能实现相应的筛选效果。如果想详细了解可以去看pink老师的讲解纯干货。APIs-day6-137-正则表达式使用_哔哩哔哩_bilibiliAPIs-day6-137-正则表达式使用是黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程的第137集视频，该合集共计200集，视频收藏或关注UP主，及时了解更多相关视频内容。https://b23.tv/2cF0HKU

1.正则表达式的概念

正则表达式：用于匹配字符串中字符组合的模式，也是对象

作用：查找、替换、提取正则表达式的文本，还可以对信息进行筛选和纠正

2.正则表达式的参考文档和在线测试平台地址

MDN Web Docs (mozilla.org)https://developer.mozilla.org/zh-CN/ （MDN文档网址）

RegExp(正则表达式) - JavaScript | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp

（MDN文档里的正则表达式资料）

在线正则表达式测试 (oschina.net)https://tool.oschina.net/regex

（正则表达式的在线测试平台）

这个平台的上还有很多可用的测试软件

3.语法

用/ /来包着正则表达式

const 变量名=/表达式/
//表示正则表达式的自变量

查找方法

test() ：这个判断有/没有返回的是布尔值

exec()：这个判断有/没有返回的是数组

代码如下：

//test()检测是否匹配
        let str = "我们是谦友 想看演唱会";
        //1.定义规则
        const reg = /谦友/;
        //2.是否匹配 regObj.test(被检验的字符串)
        console.log(reg.test(str));//布尔值
        // exec()检测是否有 匹配成功返回的是数组  匹配不成功返回的是null
        console.log(reg.exec(str));

运行结果如下：

4.元字符(特殊字符)

（1）边界符表示以什么开头和结尾 ^ 或 $

^ 表示匹配行首的文本

 console.log(/^哈/.test('哈'));//true
 console.log(/^哈/.test('二哈'));//false 这里没有以哈开头

$ 表示匹配行尾的元素

console.log(/哈$/.test('二哈'));//true $符号要写在后面
console.log(/哈$/.test('哈二'));//false 这里没有以哈做结尾

（2）量词表示重复次数

量词的分类

?表示存在/不存在的情况

 console.log(/^哈?/.test(" "));//true
 console.log(/^哈?/.test("哈哈哈"));//?表示要么出现要么不出现 不存在其他字符存在的情况

+ 类似于出现>=1次 *写在要匹配的字符后面只能允许里面的字符出现其他字符出现都不匹配

console.log(/^哈*$/.test('哈哈哈我'));//false 这里有其他的汉字
console.log(/^哈*$/.test('哈哈哈'));//true
//* 类似于出现>=0次 *写在要匹配的字符后面 只能允许里面的字符出现 其他字符出现都不匹配

* 类似于出现>=0次 *写在要匹配的字符后面只能允许里面的字符出现其他字符出现都不匹配（*和+类似）

//下面是量词的精准匹配引用于验证码和手机号要求精准匹配上
{n}表示重复固定次数 ===
{n,}表示重复>=n次
{n,m}表示重复次数在这个区间内这个区间书写时不能加空格

 console.log(/^哈{4}$/.test('哈哈哈'));//这里实现哈哈哈哈的匹配 除此之外全为错误 false
 console.log(/^哈哈{2,4}$/.test("哈哈哈"));
 console.log(/^哈{2,4}$/.test('哈哈哈哈哈哈哈'));//这里的{n,m}左右不能有空格

（3）字符类

这里的n选1 需要匹配多个加上量词即可
[]匹配字符集合只需要含有[]内部只选一个字符不能多含有

//3.字符类
        //只需要含有[]内部只选一个字符 不能多含有
        console.log(/^[abc]$/.test("iamthestrongwomen"));//true
        console.log(/^[abc]$/.test(""));//false
        console.log(/^[abc]$/.test("abc"));//false
        console.log(/^[abc]{3}$/.test("abc"));//true 这里用量词来实现重复匹配
        console.log(/^[a-z]{2,14}$/.test("abcajkd"))//true
        console.log(/^[a-z0-9A-Z]{2,14}$/.test("abcajkd"))//true
        console.log(/^[1-9][0-9]{4,}$/.test("1348910"))//true 第一位匹配数字 1-9 后面可以是数        
 字[1-9]里的>=4位数
        console.log(/^[^a-z0-9]{1,}$/.test("ZSYZHENBANG"));//[^]这里是指除了括号里的都可以
        console.log(/^[0-9A-Za-z-_]{6,13}$/.test("a_cajd12"));

取反符 [^]和取换行符以外的所有符号 .

[^]在中括号里写取反符^ 表示除了[]里面的都行
.匹配除了换行符以外的所有字符

//小的综合案例用户名案例正则表达式的模板 /^[a-z0-9A-Z-_]{6,13}$/


<!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>
    <style>
        .right {
            color: green;
        }

        .wrong {
            color: red;
        }
    </style>
</head>

<body>
//用户名案例
    <!-- 1.当表单失去焦点时进行验证 准备好正则表达式 -->
    <input type="text" placeholder="请输入用户名">
    <span></span>
    <script>
        const reg = /^[a-z0-9A-Z-_]{6,13}$/;
        const input = document.querySelector('input');
        const span = input.nextElementSibling;
        //这里当失去焦点时进行判断
        input.addEventListener('blur', function () {
            if (reg.test(this.value)) {
                //这里不需要获取span直接通过nextElementSibling
                //input.nextElementSibling.innerHTML = "输入正确";
                span.innerHTML = '输入正确';
                span.className = 'right';
            }
            else {
                span.innerHTML = '输入错误 请输入6-16位的英文数字下划线';
                span.className = 'wrong';//增加class类名
            }
        })
    </script>
</body>

</html>

（4）预定义类大写全都是取反

e.g./d 表示[0-9]
/D 表示 [^0-9]
/^\d{4}-\d{1,2}-\d{1,2}$/ 这个实现日期匹配

举例子：将下面的日期格式化

 //预定义的元字符
        console.log(/^\d{4}-\d{1,2}-\d{1,2}$/.test('2023-11-1'));//true

（5）修饰符

语法：/表达式/ 修饰符

/^java$/i.test('JAVA') 是在正则表达式后面加上i 从而不区分大小写

        console.log(/^java$/.test('java'));//true
        console.log(/^java$/.test('JAVA'));//false 说明正则是区分大小写
        console.log(/^java$/i.test('JAVA'));//i表示不区分大小写 true

（6） replace 方法通过修饰符来替换

        const str2 = "java工资很高 快去学java"
        //替换后的文本需要用新的变量去存储
        const str3 = str2.replace(/java/i, "前端");
        //这里的查找和替换都不完全
        console.log(str3);//前端工资很高 快去学java
        const str4 = str3.replace(/java/ig, "前端");
        console.log(str4);//前端工资很高 快去学前端

（7）过滤敏感词（主要是replace方法的使用）

<!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>
    <style>

    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <input type="submit" value="发布">
    <div>
        <!-- 这个div里显示用户发布的内容 -->
    </div>
    <script>
        const tx = document.querySelector('textarea');
        const submit = document.querySelector('input');
        const div = document.querySelector('div');
        submit.addEventListener('click', function () {
            //过滤掉不能看的字
            div.innerHTML = tx.value.replace(/激情|牛B/gi, "**");
        })
    </script>
</body>

</html>