【JavaScript】正则表达式-修饰符

ClearStari99

于 2023-04-06 23:40:01 发布

阅读量151

点赞数

分类专栏： JavaScript 文章标签： javascript 正则表达式前端 html

本文链接：https://blog.csdn.net/JackCao_Grass/article/details/130001709

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写，是否支持多行匹配等。

语法：

/表达式/修饰符

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

console.log(/a/i.test('a')) // true
console.log(/a/i.test('A')) // true

实际操作

console.log(/^java$/.test('java')) // true
console.log(/^java$/.test('JAVA')) // false
console.log(/^java$/i.test('JAVA')) // true
console.log(/^java$/i.test('Java')) // true

替换 replace 替换

语法：

字符串.replace(/正则表达式/, '替换的文本')

实际操作

// replace 替换
// g 是单纯 global 的缩写，匹配所有满足正则表达式的结果
const str = 'java是一门编程语言，学完JAVA工资很高。'
const re = str.replace(/java/ig, '前端')
// | 或
// const re = str.replace(/java|JAVA/g, '前端')
console.log(re)

案例

过滤敏感字：
需求：要求用户不能输入敏感字
比如，pink老师上课很有**
分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，进行**
③：要全局替换使用修饰符 g

<!DOCTYPE html>
<html lang="zh-CN">

<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>05-过滤敏感词</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>

    <script>
        const tx = document.querySelector('textarea')
        const btn = document.querySelector('button')
        const div = document.querySelector('div')

        btn.addEventListener('click', function () {
            // console.log(tx.value)
            div.innerHTML = tx.value.replace(/激情|基情/g, '**')
            tx.value = ''
        })
    </script>
</body>

</html>