【JavaScript】二十六、正则表达式_正则替换铭感词js-CSDN博客

文章目录

1、正则表达式
- 1.1 定义
- 1.2 校验
2、元字符
3、修饰符
- 3.1 语法
- 3.2 案例：过滤敏感词

1、正则表达式

Regular Expression，正则表达式，用于做字符串匹配（格式校验）、字符串特定部分提取、字符串特定部分替换（敏感词替换为**），在JS中，正则表达式是一个对象

在这里插入图片描述

1.1 定义

语法：

const 变量名 = /表达式/

举例：

// 定义规则，不用加引号，即使是中文
const regObj = /文本/

1.2 校验

test方法，用于查看正则表达式与指定的字符串是否匹配，匹配则返回true，否则false：

正则表达式对象.test(被检测的字符串)

exec方法，在一个指定字符串中执行一个搜索匹配，匹配成功，返回一个数组，否则返回null：

正则表达式对象.exec(被检测的字符串)

举例：

<body>
    <script>
        const str = '测试文本1测试文本2'
        // 定义规则，不用加引号，即使是中文
        const regObj = /文本/
        // 校验是否匹配
        const match = regObj.test(str)
        // true
        console.log(match)

        console.log(regObj.exec(str))
    </script>
</body>

在这里插入图片描述

贴一个正则小工具：https://tool.oschina.net/regex

2、元字符

即一些特殊字符，提高写正则表达式的灵活性，比如规定只能是26个英文字母，用元字符： [a-z]，元字符包括：

边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)
量词 (表示重复次数)
字符类 (比如 \d 表示 0~9)

2.1 边界符

在这里插入图片描述

<script>
    console.log(/哈/.test('哈'))    //true
    console.log(/哈/.test('哈哈'))  //true
    console.log(/哈/.test('二哈'))  //true

    console.log('----------')

    console.log(/^哈/.test('哈'))    //true
    console.log(/^哈/.test('哈哈'))  //true
    console.log(/^哈/.test('二哈'))  //false
</script>

如果 ^ 和 $ 在一起，表示必须是精确匹配，必须一模一样才是true

<script>
    console.log(/^哈$/.test('哈'))    //true
    console.log(/^哈$/.test('哈哈'))  //false，精确匹配，一模一样才是true

</script>

2.2 量词

设定某个模式出现的次数

在这里插入图片描述

<body>
    <script>
        console.log(/^哈*$/.test(''))  //true，重复了0次
        console.log(/^哈*$/.test('哈'))  //true，重复了1次
        console.log(/^哈*$/.test('哈哈'))  //true，重复了2次
        console.log(/^哈*$/.test('二哈'))  //false
        console.log(/^哈*$/.test('哈很哈'))  //false
    </script>
</body>

以/^哈*$/.test('哈很哈')为例，^ 和 $ 在一起，表示必须是精确匹配，*则匹配0次或者多次，而哈很哈，不满足精确匹配，返回false，这就是上面说的，代表某个模式出现的次数，哈很哈这个字符串，首先就不满足这个模式（精确匹配的模式），还没到量词就被pass了

<body>
    <script>
        console.log(/^哈+$/.test(''))  //false，重复了0次
        console.log(/^哈+$/.test('哈'))  //true，重复了1次
        console.log(/^哈+$/.test('哈哈'))  //true，重复了2次
        console.log(/^哈+$/.test('二哈'))  //false
        console.log(/^哈+$/.test('哈很哈'))  //false
    </script>
</body>

{n}即必须重复n次

<body>
    <script>
        console.log(/^哈{3}$/.test(''))  //false，重复了0次
        console.log(/^哈{3}$/.test('哈'))  //false，重复了1次
        console.log(/^哈{3}$/.test('哈哈哈'))  //true，重复了3次
        console.log(/^哈{3}$/.test('二哈'))  //false
        console.log(/^哈{3}$/.test('哈很哈'))  //false
    </script>
</body>

最后，注意{n,}和{n,m}的左右两边，都不能有空格

2.3 字符类

2.3.1 方括号[ ]

用[ ] 匹配字符集合，如下，后面的字符串只要包含 abc 中任意一个字符，都返回 true

在这里插入图片描述

用[ ] 里面再加上连字符-，表示范围：

[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以

以QQ号为例：

在这里插入图片描述

[1-9]即第一位只能从1到9选，不能为0，后面的[0-9]搭配了一个{4,}（注意，量字符，是给它左侧最近的一个加的），即从第二位开始，可以是0到9中的任意一位，至少4位，比如10000，就是四个0

// 例子
<body>
    <script>
        console.log(/[abc]/.test('a'))  //true
        console.log(/[abc]/.test('ab'))  //true
        console.log(/[abc]/.test('abc'))  //true
        console.log(/[abc]/.test('abcd'))  //true

        console.log('---------')

        console.log(/^[abc]$/.test('a'))  //true
        console.log(/^[abc]$/.test('ab'))  //false，数量不对，只能有一个字母，中括号精确匹配下是n选1
        console.log(/^[abc]$/.test('abc'))  //false

        console.log('---------')

        console.log(/^[abc]$/.test('a'))  //true
        console.log(/^[abc]{2}$/.test('ab'))  //true，加入了量词
        console.log(/^[abc]{3}$/.test('abc'))  //true
    </script>
</body>

用[ ] 里面搭配^，表示取反：

[^a-z] 匹配除了小写字母以外的字符

2.3.2 小点.

小点. 匹配除换行符之外的任何单个字符

2.3.3 预定义

指一些常见模式的简写方式：

在这里插入图片描述

2.4 案例：用户名验证

需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位，表单失焦时开始验证：

<!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>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>

    <script>
        const input = document.querySelector('input')
        const span = document.querySelector('span')
        const regObj = /^[a-zA-Z0-9-_]{6,16}$/
        input.addEventListener('blur', function () {
            if (regObj.test(this.value)) {
                span.innerHTML = '格式正确'
                span.className = 'right'
            } else {
                span.innerHTML = '格式错误'
                span.className = 'error'
            }
        })
    </script>
</body>

</html>

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

在这里插入图片描述

3、修饰符

3.1 语法

修饰正则表达式执行的一些细节，比如区分大小写，语法：

在这里插入图片描述

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

<body>
    <script>
        console.log(/^java$/.test('java'))  //true
        console.log(/^java$/.test('JAVA'))  //false
        console.log(/^java$/i.test('JAVA'))  //true
    </script>
</body>

replace方法替换：

在这里插入图片描述

<body>
    <script>
        const str = 'java课程学JAVA'
        const newStr = str.replace(/java/i, 'JS')
        console.log(newStr)
    </script>
</body>

发现只替换了第一个词：

在这里插入图片描述
加g全局替换：

const newStr = str.replace(/java/ig, 'JS')

当然，除了用i解决大小写问题，也可以这么写：符号或

const newStr = str.replace(/java|JAVA/g, 'JS')

3.2 案例：过滤敏感词

需求：要求用户不能输入敏感字“傻鸟”、“蠢鸟”

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布评论</button>
    </div>
    <div>评论内容:<span></span></div>
    <script>
        const text = document.querySelector('textarea')
        const button = document.querySelector('button')
        const span = document.querySelector('span')
        button.addEventListener('click', function () {
            const newText = text.value.replace(/傻鸟|蠢鸟/g, '**')
            text.value = ''
            span.innerHTML = newText
        })
    </script>
</body>

</html