JavaScript API知识笔记 第五天
正则表达式
一、介绍
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本。过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)(匹配)
二、语法
1.定义正则表达式语法
const 变量名=/ 表达式 /
其中/ /是正则表达式字面量
eg：
const reg=/前端/
判断是否有符合规则的字符串
test()方法——用来查看正则表达式与指定的字符串是否匹配
语法：
regObj.test(被检测的字符串)
eg：
const str='IT,前端开发'
const reg=/前端/
console.log(reg.rest(str))//true
如果正则表达式与指定的字符串匹配 ，返回true，否则false
检索（查找）符合规则的字符串：
exec()方法——在一个指定字符串中执行一个搜索匹配
语法：
regObj.exec(被检测字符串)
eg：
const str='IT,前端开发'
const reg=/前端/
console.log(reg.exec(str))
//[0: "前端",groups: undefined,index: 3,input: "IT,前端开发",length: 1]
如果匹配成功，exec() 方法返回一个数组，否则返回null
三、元字符
- 普通字符:
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字
也就是说普通字符只能够匹配字符串中与它们相同的字符
- 元字符(特殊字符）：
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。例如[a-z]
1.边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配
eg：
console.log(/^二哈$/.test('二哈二哈'))//false
需要精确为仅二哈
2.量词（表示重复次数）
量词用来设定某个模式出现的次数
注意：
逗号左右两侧千万不要出现空格
3.字符类（比如 \d 表示 0~9）
（1）
[]匹配字符集合
只要出现括号内的任意一个字符，即返回true
eg：
console.log([abc].test('andy'))//true
console.log([abc].test('die'))//false
[ ]里面加上 - 连字符
使用连字符 - 表示一个范围
eg：
console.log(/*[a-z]$/.test('c')) //true
比如：
-
[a-z] 表示a到z 26个英文字母都可以
-
[a-zA-Z] 表示大小写都可以
-
[0-9] 表示 0~9 的数字都可以
[ ]里面加上 ^ 取反符号
eg：
[^a-z] 匹配除了小写字母以外的字符
(2)
. 匹配除换行符之外的任何单个字符
案例
用户名验证案例
需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
②：当表单失去焦点就开始验证.
③：如果符合正则规范, 则让后面的span标签添加 right 类.
④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.
const reg = /^[a-zA-Z0-9-_]{6,16}$/
const input = document.querySelector('input')
const sp = document.querySelector('span')
input.addEventListener('blur', function () {
if (reg.test(input.value)) {
sp.innerHTML = '用户名可用'
sp.className = 'right'
} else {
sp.innerHTML = '请输入6-16位数字、字母、下划线或短横线'
sp.className = 'error'
}
})
(3)
预定义：指的是 某些常见模式的简写方式
四、修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
-
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
-
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
eg：
console.log(/a/i.test('a')) //true
console.log(/a/i.test('A')) //true
replace 替换
语法：
字符串.replace(/正则表达式/,'替换的文本')
案例
需求：要求用户不能输入敏感字
比如，pink老师上课很有**
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，进行**
③：要全局替换使用修饰符 g
const text = document.querySelector('textarea')
const button = document.querySelector('button')
const div = document.querySelector('div')
button.addEventListener('click', function () {
div.innerHTML = text.value.replace(/激情/g, '**')
text.value = ''
})
