正则表达式
正则表达式是用于匹配字符串中字符组合的模式
正则表达式作用:
表单验证（匹配）
过滤敏感词（替换）
字符串中提取我们想要的部分（提取)
正则表达式基本使用
正则表达式使用分为两步
01-定义正则表达式
02-检测查找是否匹配
const str = '你好前端，你好Java，你好Python'
// 正则表达式使用：
// 需求：看看 str 中是否包含 前端
// 1. 定义正则表达式
const reg = /前端/
// console.log(typeof reg)
// 2. 使用正则对象 正则对象.test(要验证的字符串)
console.log(reg.test(str))
exec()方法
exec() 方法 在一个指定字符串中执行一个搜索匹配
匹配成功,返回的是一个数组,否则返回null
// 3. exec() 方法 有则返回数组 没有则返回null
const str = '你好前端,你好java,你好前端,你好前端'
// 定义规则
const reg = /前端/
// 检测是否匹配
const arr = reg.exec(str)
// 匹配成功返回数组 否则返回null
console.log(arr)
元字符
普通字符
字符仅能描述它们本身的字符称为普通字符<例如 数字和字母
普通字符只能匹配字符串与它们相同的字符
元字符
具有一些特殊含义的字符,极大提高了灵活性和强大的匹配功能
例如: 规定用户只能输入26个文字母,普通字符 abcdyf...
元字符写法: [a-z]
边界符
1. 边界符
//1.1^表示 以 xxx开头
console.log(/^哈/.test('哈')) // true
console.log(/^哈/.test('哈哈')) // true
console.log(/^哈/.test('二哈')) // flase
// 1.2 $ 表示 以 xxx结尾
// true 只有这种情况为true 否则全是false
/*1.3 正则严格匹配 ： 同时添加开头边界与结尾边界
/^abc$/: 正确含义： a(开头) + b + c(结尾)
世界上只有唯一的一个字符满足条件： abc*/
// 如果 ^ 和 $ 在一起，必须是精确匹配
console.log(/^abc$/.test('a123abcabc')) //false
console.log(/^abc$/.test('ab123c')) //false
console.log(/^abc$/.test('abc123')) //false
console.log(/^abc$/.test('abcabc')) //false
console.log(/^abc$/.test('abc')) //true
// 手机号码 必须以 数字 1开头
// ^ 表示 以 xxx开头
console.log(/^1/.test('1234')); // true 表示以1开头
console.log(/^1/.test('234')); // false 表示以1开头
console.log(/1$/.test('234')); // false 表示字符串必须是以 1结尾
量词
重复的次数
量词 含义
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n-m次
{n,} 出现至少n次（>=n）
量词*
* 表示 可以有也可以没有
* 类似 >=0 次 出现零次或多次
console.log(/^哈*$/.test('')) // true
console.log(/^哈*$/.test('哈')) // true
console.log(/^哈*$/.test('哈哈哈哈')) // true
console.log(/^哈*$/.test('二哈很傻'))// false
量词+
+ 表示 出现一次或多次（至少出现一次）
类似 >=1 次
console.log(/^哈+$/.test('')) // false
console.log(/^哈+$/.test('哈')) // true
console.log(/^哈+$/.test('哈哈哈哈')) // true
量词?
? 表示 出现零次或一次（最多出现一次）
console.log(/^哈?$/.test('')) // true
console.log(/^哈?$/.test('哈')) // true
console.log(/^哈?$/.test('哈哈哈哈')) // false
量词 {n} 写几，就必须出现几次
量词 {n} 写几，就必须出现几次
console.log(/^哈{3}$/.test('哈'))
console.log(/^哈{3}$/.test('哈哈'))
console.log(/^哈{3}$/.test('哈哈哈'))
console.log(/^哈{3}$/.test('哈哈哈哈'))
console.log(/^哈{3}$/.test('哈哈哈哈哈'))
console.log(/^哈{3}$/.test('哈哈哈哈哈哈'))
/* 你哈输出2次 使用()*/
console.log(/^(你哈){2}$/.test('你哈你哈'))
console.log(/^你哈{2}$/.test('你哈哈'))
量词 {n,} >=n
量词 {n,} >=n 出现至少n次
console.log((/^哈{2,}$/.test(''))) // false
console.log((/^哈{2,}$/.test('哈哈'))) // true
console.log((/^哈{2,}$/.test('哈哈哈哈哈哈'))) //true
{n,m} 逗号左右两侧千万不能有空格 >=n && <= m
{n,m} 大于等于n 同时 小于等于 m
console.log(/^哈{2,3}$/.test('哈')) // false
console.log(/^哈{2,3}$/.test('哈哈')) // true
console.log(/^哈{2,3}$/.test('哈哈哈')) //true
console.log(/^哈{2,3}$/.test('哈哈哈哈')) // false
字符类
[ ] 匹配字符集合
// [] 表示 匹配 里面的任意一个字符
console.log(/[abcd]/.test('abcd')) // true
console.log(/^[abcd]$/.test('abcd')) // false
console.log(/^[abcd]$/.test('b')) // true
console.log(/^[abcd]$/.test('c')) // true
console.log(/^[abcd]$/.test('ehfg')) // false
console.log(/^[abc]{2}$/.test('ab'))// true
使用连字符 - 表示一个范围
// 表示 匹配 必须以 小写字母 a-z
console.log(/^[a-z]$/.test('a')) // true
console.log(/^[A-Z]$/.test('a')) // false
console.log(/^[0-9]$/.test(2))//true
console.log(/^[a-zA-Z0-9]$/.test(0))//true
// 匹配 除了 小写字母 a-z 以外的字符都能匹配成功
console.log(/[^a-z]/.test('a')) // false
字符类-预定义
// 01-匹配数字字符
console.log(/\d/.test('a')) //false
console.log(/\d/.test('0'))// true
// 02-匹配非数字字符
console.log(/\D/.test('a')) // true
console.log(/\D/.test('4')) // false
// 03-匹配任意的字母 数字 下划线_
console.log(/\w/.test('_')) //true
console.log(/\w/.test('-')) //false
// 04-匹配任意非单词字符
console.log(/\W/.test('ljb123456')) //false
console.log(/\W/.test('ljb123456-')) //true
修饰符
i: 表示 不区分大小写 g :表示 全局匹配
console.log(/^vue$/.test('vue')) //true
console.log(/^vue$/.test('VUE')) //false
console.log(/^vue$/i.test('Vue')) // true
const str = 'hello帅哥，hello小可爱，Hello小哥哥'
// 默认情况下，正则表达式只能匹配满足条件第一个字符
// const reg = /hello/
const reg = /hello/gi
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
字符串.replace(需要替换的字符串, 替换成什么字符串)
字符串.replace(/正则表达式/, '替换的文本')
const str = 'hello帅哥，hello小可爱，Hello小哥哥'
// 将里面所有 的 hello 替换为 你好
// 字符串.replace(/正则表达式/, '替换的文本')
// 定义正则
// 表示 全局匹配的同时 还 不区分大小写
// 先测试替换一个,在测试 gi就可以
const reg = /hello/gi
const res = str.replace(reg, '你好')
console.log(res)
过滤敏感词
<script>
const tx = document.querySelector('textarea')
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
// console.log(tx.value)
// btn.nextElementSibling.innerHTML = tx.value
// 定义正则
const reg = /基情|激情/g
const res = tx.value.replace(reg, '**')
btn.nextElementSibling.innerHTML = res
tx.value = ''
})
</script>
替换replace替换
- 语法: 字符串.replace(/正则表达式过滤者/, '替换文本')
- 替换多个使用g全局匹配
