正则表达式

最新推荐文章于 2024-09-07 15:10:36 发布

成为一个优秀的人

最新推荐文章于 2024-09-07 15:10:36 发布

阅读量162

点赞数

文章标签：正则表达式前端 javascript

本文链接：https://blog.csdn.net/qq_54201133/article/details/125166330

版权

正则表达式

1.1什么是正则表达式

正则表达式( Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

正则表达式在JavaScript中的使用场景:

例如验证表单:用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文**(匹配)**
比如用户名: /¹{3,16}$/
过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分**(提取)**等。

1.2语法

1.2.1定义正则表达式语法

// 其中/ / 是正则表达式字面量
let 变量名 = /表达式/

<body>
    <script>
        //定义正则表达式 reg 里面存的是对象
        let reg = /前端/
    </script>
</body>

1.2.2判断是否有符合规则的字符串:

**test()方法 ** 用来查看正则表达式与指定的字符串是否匹配

语法:

reg0bj.test(被检测的字符串)

比如:

letstr='IT培训，前端开发培训,web前端培训,软件测试培训，产品经理培训’
let reg= /前端/
let re = reg.test(str)
console.log(re) // true

如果正则表达式与指定的字符串匹配，返回true,否则false

1.2.3检索(查找)符合规则的字符串:

**exec()**方法在一个指定字符串中执行一个搜索匹配
语法:
```
reg0bj.exec(被检测字符串)
```

比如:

let str = 'IT培训，前端开发培训，web前端培训,软件测试培训，产品经理培训'
let reg = /前端/
let re = reg.exec(str)
console.1og(re) // 返回的是个数组

1.3元字符

普通字符:

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符)
- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话abcdefghijklm…
- 但是换成元字符写法: [a-z]
参考文档:
- MDN: 正则表达式 - JavaScript | MDN (mozilla.org)
- 正则测试工具: http://tool.oschina.net/regex

1.3.1边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)

如果^和$在一起，表示必须是精确匹配。

<body>
    <script>
        // console.log(/哈/.test('哈哈'))
        // console.log(/哈/.test('二哈'))
        // // 以 ^ 开头
        console.log(/^哈/.test('二哈'))  // false
        console.log(/^二哈/.test('二哈我开心'))  // true
        // 以 $ 结尾
        console.log(/哈$/.test('我开心的哈哈'))  // true 
        console.log(/哈$/.test('我开心的哈哈大笑'))  // false 
        // 以 ^ 开头, 以 $ 结尾 (精确匹配)
        console.log(/^哈$/.test('哈哈大笑'))  // false 
        console.log(/^哈$/.test('大笑哈哈'))  // false 
        console.log(/^哈$/.test('哈哈大笑哈哈'))  // false
        console.log(/^哈$/.test('哈'))  // true  精确匹配

    </script>
</body>

1.3.2量词

量词用来 设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

// * 量词 n >= 0 

console.log(/a*/.test(''))  //true 
console.log(/a*/.test('a'))  //true
console.log(/a*/.test('aa'))  //true
console.log(/a*/.test('aaaaaaaa'))  //true
console.log(/a*/.test('b'))  //true

// + 量词 n >= 1

console.log(/a+/.test(''))  //false
console.log(/a+/.test('a'))  //true
console.log(/a+/.test('aa'))  //true
console.log(/a+/.test('aaaaa'))  //true
console.log(/a+/.test('b'))  //false

// ? 出现 0 || 1 
console.log(/^a?$/.test(''))  // true
console.log(/^a?$/.test('a'))  // true
console.log(/^a?$/.test('aa'))  // false

// {n}   只能出现 n次   符号之间不要加空格
console.log(/^a{3}$/.test('aa'))  //false
console.log(/^a{3}$/.test('aaa'))  //true
console.log(/^a{3}$/.test('aaaa'))  //false

// {n,}   >= n 
console.log(/^a{3,}$/.test('aa'))  //false
console.log(/^a{3,}$/.test('aaa'))  //true
console.log(/^a{3,}$/.test('aaaa'))  //true

// {n,m}   >= n  <= m 
console.log(/^a{3,6}$/.test('aa'))  //false
console.log(/^a{3,6}$/.test('aaa'))  //true
console.log(/^a{3,6}$/.test('aaaa'))  //true
console.log(/^a{3,6}$/.test('aaaaa'))  //true
console.log(/^a{3,6}$/.test('aaaaaaaa'))  //false

1.3.3字符类

1.3.3.1[] 匹配字符集合

后面的字符串只要包含abc中任意一个字符,都返回true。

// 字符类 [], abc中存在一个即为true
console.log(/[abc]/.test('abc'))  //true
console.log(/[abc]/.test(''))  //false
console.log(/[abc]/.test('andy'))  //true
console.log(/[abc]/.test('baby'))  //true
console.log(/[abc]/.test('cry'))  //true
console.log(/[abc]/.test('die'))  //false
 // 字符类[], abc中只能存在一个才能为true
console.log(/^[abc]$/.test('abc'))  //false
console.log(/^[abc]$/.test('a'))  //true
console.log(/^[abc]$/.test('b'))  //true
console.log(/^[abc]$/.test('c'))  //true
console.log(/^[abc]$/.test('cc'))  //false

1.3.3.2[] 里面加上 - 连字符

使用连字符 - 表示一个范围

console.log(/^[a-z]$/.test('c')) // true

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

// 26个英文字母选其中的一个
        console.log(/^[a-zA-Z]$/.test('d'))  // true
        console.log(/^[a-zA-Z]$/.test('D'))  // true
        console.log(/^[a-zA-Z]$/.test('DD'))  // false
        console.log(/^[a-zA-Z0-9]$/.test('6'))  // true
        console.log(/^[a-zA-Z0-9-_]$/.test('6'))  // true

1.3.3.3[] 里面加上^取反符号

比如:
- [^a-z] 匹配除了小写字母以外的字符
- 注意要写到中括号里面

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

1.3.3.5预定义:指的是某些常见模式的简写方式

预定类	说明
\d	匹配0-9之间的任一数字, 相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_ ]
\W	除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
\s	匹配空格(包括换行符、制表符、空格符等) , 相等于[ \t\r\n\v\f]
\S	匹配非空格的字符，相当于[^ \t\r\n\v\f]

日期格式: ^\d{4}-\d{1,2}-\d{1,2}

1.4 修饰符

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

/表达式/修饰符

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

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

替换replace替换

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

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        let btn = document.querySelector('button')
        let textarea = document.querySelector('textarea')
        let div = document.querySelector('div')
        btn.addEventListener('click', function () {
            // 过滤用户输入的内容
            div.innerHTML = textarea.value.replace(/激情|基情/g, '**') //加了g就是全部出现'激情'或者'基情'的地方都会替换

            // div.innerHTML = textarea.value
        })
    </script>
</body>