正则表达式
是用于匹配字符串中字符组合的模式 , 比如会用正则表达式来 :
- 判断用户输入的手机号的格式 , 或者用来判断用户输入的验证码的格式
- 过滤掉页面中的一些敏感内容 , 选中对页面中的特定部分 , 便于实现一些操作 : '修改颜色,字体大小'等
如何使用
- 定义匹配规则
- 匹配内容
示例 :
const str = "hello,theSummerKitten" //这是被匹配的文本
const reg = /Kitten/ //这是定义一个匹配规则 /Kitten/ 的意思是检测是否含有Kitten这个字符串
console.log(reg.test(str)) //通过test()方法来匹配 , 打印结果为true
console.log(/abc/.test(str)) //打印结果为false
元字符
一些具有特殊含义的字符 , 可以提高匹配功能
元字符也有分类 , 分为 :
- 边界符
- 量词
- 字符类
1.边界符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本 (以谁开始) |
| $ | 表示匹配行尾的文本 (以谁结束) |
示例 :
console.log(/a/.test('abcdefg')) // true , 字符串里包含a
console.log(/^a/.test('abcdefg')) // true , 字符串以a开头
console.log(/a$/.test('abcdefg')) // true , 字符串以a结尾
console.log(/^a$/.test('a')) // true , 精确匹配 a
console.log(/^a$/.test('aa')) // false, 只匹配字符 a
2.量词
设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
示例 :
console.log(/^a*$/.test('')) // true , 0次
console.log(/^a*$/.test('aaa')) // true , 匹配多次 ,这两个都要求字符串以 a 开头和结尾
console.log(/^a*$/.test('aab')) // false
console.log(/^a+$/.test('')) // false
console.log(/^a+$/.test('aaa')) // true
// 其他也类似 , 这里不提
3.字符类
1. [ ] 匹配字符集合
console.log(/^[abc]$/.test('a')) // true , 只要包含abc中的一个就可 , 是 '或' (a或b或c)
console.log(/^[abc]$/.test('ab')) // false, 精确匹配, 开头结尾相同
console.log(/^[abc]{2}$/.test('ab'))// true , 加入量词
// 此外 :
console.log(/^[a-z]$/.test('t')) // true 匹配a-z范围内的一个字符
console.log(/^[0-9]$/.test('2')) // true
console.log(/^[a-zA-Z0-9]$/.test('5'))// true
console.log(/^[1-9][0-9]{4,}$/.test('12323')) // true 从10000开始往后的数字都可以
// 解析: 必须是以 1-9开头 , 后面的字符范围是0-9 , 而且最少有4次 , 所以最小是 10000
// [^] 表示除了该规则内的其他字符
console.log(/[^a-z]/.test('b')) // false , 表示只匹配除了a-z以外的字符
2.预定义
指的是 某些常见模式的简写方式
| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字,相当于[0-9] |
| \D | 匹配0-9以外的字符 , 相当于 0-9 |
| \w | 匹配任意字母,数字和下划线 |
| \W | 除所有字母,数字和下划线 |
| \s | 匹配空格(包括换行符,制表符,空格符等) |
| \S | 匹配非空格的字符 |
示例 :
//日期格式:
^\d{4}-\d{1,2}-\d{1,2}
4.修饰符
i 对应ignore , 匹配时不区分大小写
g 对应global , 匹配所有满足正则表达式的结果
console.log(/^java$/i.test('JAVA')) // true
replace() 方法
该方法有两个参数 , 第一个是正则表达式 , 第二个是替换字符集
const str = 'javascript as important as JAVA'
const str2 = str.replace(/java/i, 'python')
console.log(str2) // pythonscript as important as java 只会替换第一个
const str3 = str.replace(/java/ig, 'python') // replace() 方法不会改变原字符串
console.log(str3) // pythonscript as important as python 全局替换g
// 给一个str : "激情!热血澎湃!!" , 替换其中的敏感词
str = str.replace(/激情/g , '**')
console.log(str) // **!热血澎湃!!
可以自己尝试给表单元素添加 js 代码来判断表单内容是否合法
