介绍
- 正则表达式是用于匹配字符串中的字符组合的模式，在js中正则表达式也是对象
- 通常用来查找，替换哪些符合正则表达式的文本，许多语言都支持正则表达式
- 正则表达式在js中的使用场景
1.验证表单：用户名表单只能输入英文字母，数字和下划线，昵称输入中可以输入中文（匹配）
2.过滤敏感词（替换）
3.字符串中提取想要的部分
语法
-
定义正则表达式语法
let 变量名 = / 表达式 / // 例如： let reg=/前端// / 是正则表达式字面量
-
判断是否有符合规则的字符串
test（）方法 用来查看正则表达式与指定的字符串是否匹配
语法：
regobj.test(被检测的字符串)
- 检索（查找）符合规则的字符串
exec（）方法在一个指定字符串中执行的一个搜索匹配，找到返回素组，找不到返回null
regobj. exec(被检测的字符串)
元字符
- 分类
1.边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
console.log(/哈/.test('哈哈'))
// ^开头$结尾
console.log(/^哈$/.test('哈哈'))//精确匹配
2.量词（表示重复次数）
设定某个模式出现的次数
* 匹配前面的子表达式零次或多次。
console.log(/a*/.test('a'))//a可以出现>=0
+ 匹配前面的子表达式一次或多次。
console.log(/a+/.test('a'))//a可以出现>=1
? 匹配前面的子表达式零次或一次。
console.log(/a+/.test('a'))//a可以出现0||1
限定出现的次数：
{n} n 是一个非负整数。匹配确定的 n 次。
console.log(/^a{6}$/.test('a'))//a只能出现6次
{n,} n 是一个非负整数。至少匹配n 次。
console.log(/^a{6，}$/.test('a'))//a至少出现6次
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次
console.log(/^a{6，7}$/.test('a'))//a最少出现 n 次且最多出现 m 次
3.字符类
-
[a]匹配字符集合
//只要中括号里面的任意字符出现都返回true console.log(/[abc]/.test('andy')) -
[^a ]出现未包含的任意字符
//只要中括号里面的不出现任意字符都返回true console.log(/[^abc]/.test('andy')) -
[a-z]连字符
//只要中括号里面的出现a-c任意字符都返回true console.log(/[a-c]/.test('andy')) -
[^a-z]连字符
//只要中括号里面的未出现a-c任意字符都返回true console.log(/[^a-c]/.test('andy')) -
.匹配除了换行符号之外的任何一个人单个字符
-
\d匹配一个数字字符
\d // 匹配一个数字字符。等价于 [0-9] -
\D 匹配一个非数字字符
\D //匹配一个非数字字符。等价于 [^0-9] -
\f匹配一个换页符
\f //匹配一个换页符。等价于 \x0c 和 \cL。 -
\n匹配一个换行符
\n// 匹配一个换行符。等价于 \x0a 和 \cJ。 -
\r匹配一个回车符
\r// 匹配一个回车符。等价于 \x0d 和 \cM。 -
\s匹配任何空白字符
\s //匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。 -
\S匹配任何非空白字符
\S// 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
4.修饰符
修饰符约束正则执行的某些细节行为，如是否区别大小写，是否支持多行匹配 语法
/表达式/修饰符
i是单词ignore的缩写正则匹配时字母不区分大小写
console.log(/a/i.test('a'))
console.log(/a/i.test('A'))
//结果都是true
g时单词global的缩写，匹配所有满足正则表达式的结果
console.log(/a/g.test('A'))
//g 修饰符可以查找字符串中所有的匹配项
div.innerHTML = textarea.value.replace(/激情/g, '**')
替换replace
字符串.replace(/正则表达式/,'替换的文本')
过滤敏感词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
</body>
<script>
let btn = document.querySelector('button')
let div = document.querySelector('div')
let textarea = document.querySelector('textarea')
btn.addEventListener('click', function() {
// 过滤用户输入的内容
div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
})
</script>
</html>
