一、正则表达式
正则表达式（Regular Expression）是一种字符串匹配的模式（规则）。
（一）使用场景
- 验证表单：如手机号表单要求用户只能输入 11 位数字（匹配）。
- 过滤页面内容中的敏感词（替换），或从字符串中获取特定部分（提取）等。
（二）正则基本使用
- 定义规则：
/ / 是正则表达式字面量。- 正则表达式也是
对象。
- 使用正则：
test() 方法用来查看正则表达式与指定的字符串是否匹配。- 如果正则表达式与指定的字符串匹配，返回
true，否则返回 false。
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<script>
const str = 'web前端开发'
const reg = /web/
console.log(reg.test(str))
console.log(reg.test('java开发'))
</script>
</body>
|
（三）元字符
- 普通字符：
- 大多数字符仅描述自身，称作普通字符，如所有字母和数字。
- 普通字符只能匹配字符串中与它们相同的字符。例如，规定用户只能输入英文 26 个英文字母，普通字符写法：
/[abcdefghijklmnopqrstuvwxyz]/。
- 元字符 (特殊字符）：
- 具有特殊含义的字符，可极大提高灵活性和强大的匹配功能。例如，规定用户只能输入英文 26 个英文字母，元字符写法：
/[a - z]/。
1. 边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符：
| 边界符 |
含义 |
^ |
匹配开头的位置 |
$ |
匹配结束的位置 |
如果 ^ 和 $ 在一起，表示必须是精确匹配。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <body>
<script>
const reg = /^web/
console.log(reg.test('web前端'))
console.log(reg.test('前端web'))
console.log(reg.test('前端web学习'))
console.log(reg.test('we'))
const reg1 = /web$/
console.log(reg1.test('web前端'))
console.log(reg1.test('前端web'))
console.log(reg1.test('前端web学习'))
console.log(reg1.test('we'))
const reg2 = /^web$/
console.log(reg2.test('web前端'))
console.log(reg2.test('前端web'))
console.log(reg2.test('前端web学习'))
console.log(reg2.test('we'))
console.log(reg2.test('web'))
console.log(reg2.test('webweb'))
</script>
</body>
|
2. 量词
量词用来设定某个模式重复次数：
| 量词 |
含义 |
|
|
* |
重复次数 >= 0 次 |
|
|
+ |
重复次数 >= 1 次 |
|
|
? |
重复次数 `0 |
|
1` |
{n} |
重复 n 次 |
|
|
{n,} |
重复次数 >= n |
|
|
{n,m} |
n <= 重复次数 <= m |
|
|
注意：逗号左右两侧千万不要出现空格。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <body>
<script>
const reg1 = /^w*$/
console.log(reg1.test(''))
console.log(reg1.test('w'))
console.log(reg1.test('ww'))
console.log('-----------------------')
const reg2 = /^w+$/
console.log(reg2.test(''))
console.log(reg2.test('w'))
console.log(reg2.test('ww'))
console.log('-----------------------')
const reg3 = /^w?$/
console.log(reg3.test(''))
console.log(reg3.test('w'))
console.log(reg3.test('ww'))
console.log('-----------------------')
const reg4 = /^w{3}$/
console.log(reg4.test(''))
console.log(reg4.test('w'))
console.log(reg4.test('ww'))
console.log(reg4.test('www'))
console.log(reg4.test('wwww'))
console.log('-----------------------')
const reg5 = /^w{2,}$/
console.log(reg5.test(''))
console.log(reg5.test('w'))
console.log(reg5.test('ww'))
console.log(reg5.test('www'))
console.log('-----------------------')
const reg6 = /^w{2,4}$/
console.log(reg6.test('w'))
console.log(reg6.test('ww'))
console.log(reg6.test('www'))
console.log(reg6.test('wwww'))
console.log(reg6.test('wwwww'))
</script>
</body>
|
3. 范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用 [] 表示范围：
| 示例 |
含义 |
| [abc] |
匹配包含的单个字符，多选 1 |
| [a - z] |
连字符，匹配单个小写字母范围 |
| [^a - z] |
取反符，匹配不在此范围的单个字符 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <body>
<script>
const reg1 = /^[abc]$/
console.log(reg1.test('a'))
console.log(reg1.test('b'))
console.log(reg1.test('c'))
console.log(reg1.test('d'))
console.log(reg1.test('ab'))
const reg2 = /^[a - z]$/
console.log(reg2.test('a'))
console.log(reg2.test('p'))
console.log(reg2.test('0'))
console.log(reg2.test('A'))
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B'))
console.log(reg3.test('b'))
console.log(reg3.test(9))
console.log(reg3.test(','))
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1'))
console.log(reg4.test('abcd12'))
console.log(reg4.test('ABcd12'))
console.log(reg4.test('ABcd12_'))
const reg5 = /^[^a - z]$/
console.log(reg5.test('a'))
console.log(reg5.test('A'))
console.log(reg5.test(8))
</script>
</body>
|
4. 字符类
某些常见模式的简写方式，区分字母和数字：
| 字符类 |
含义 |
\d |
匹配一个数字字符，等价于 [0 - 9] |
\D |
匹配一个非数字字符，等价于 [^0 - 9] |
\w |
匹配字母、数字、下划线，等价于 [a-zA-Z0-9_] |
\W |
匹配非字母、数字、下划线，等价于 [^a-zA-Z0-9_] |
\s |
匹配任何空白字符，包括空格、制表符、换页符等，等价于 [\f\n\r\t\v] |
\S |
匹配任何非空白字符，等价于 [^\f\n\r\t\v] |
二、替换和修饰符
（一）替换
replace 替换方法，可以完成字符的替换。replace 返回值是替换完毕的字符串。
1
2
3
4
5
6
7
8
9
| <body>
<script>
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
</script>
</body>
|
（二）修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等：
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写。g 是单词 global 的缩写，匹配所有满足正则表达式的结果。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<script>
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
</script>
</body>
|
三、正则插件
四、change 事件
给 input 注册 change 事件，值被修改并且失去焦点后触发。
五、判断是否有类
使用 元素.classList.contains() 方法，可查看元素是否包含某个类，如果有则返回 true，没有则返回 false。
