学习目标：
- 掌握正则表达式
学习内容：
`
- 什么是正则表达式
- 语法
- 元字符
- 修饰符
什么是正则表达式：
正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
- 使用场景
例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）
比如用户名： /^[a-zA-Z0-9-_]{6,16}$/
过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。
- 小结
| 正则表达式 | 用于匹配字符串中字符组合的模式 |
|---|---|
| 正则表达式的作用 | 表单验证（匹配）；过滤敏感词（替换）；字符串中获取我们想要的部分（提取） |
语法：
JavaScript中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：
- 1.定义正则表达式语法
const 变量名 = /表达式/
其中/ / 是正则表达式字面量。
比如：
const reg = /前端/
- 2.判断是否有符合规则的字符串
test()方法 ：用来查看正则表达式与指定的字符串是否匹配。
regObj.test(被检测的字符串)
比如：
const str = '要坚持努力学习前端，加油，加油'//正则表达式使用：//1. 定义规则const reg = /前端///2.是否匹配console.log(reg.test(str)) //true
如果正则表达式与指定的字符串匹配，返回true，否则false。
- 小结
正则表达式使用分为几步？
1.定义正则表达式
2.检测查找是否匹配
- 检索（查找）符合规则的字符串
exec()方法：在一个指定字符串中执行一个搜索匹配。
regObj.exec(被检测的字符串)
比如：
const str = '要坚持努力学习前端，加油，加油'//正则表达式使用：//1. 定义规则const reg = /前端///2.是否匹配// console.log(reg.test(str)) //true//3.exec()console.log(reg.exec(str)) //返回数组
如果匹配成功，exec()方法返回一个数组，否则返回null。
- 小结
| 正则表达式检测查找 | 区别 |
|---|---|
test()方法 | 用于判断是否有符合规则的字符串，返回的是布尔值。找到返回true，否则false。 |
exec()方法 | 用于检索（查找）符合规则的字符串，找到返回数组，否则为null。 |
<title>正则表达式的使用</title>
</head><body><script>const str = '要坚持努力学习前端，加油，加油'//正则表达式使用：//1. 定义规则const reg = /前端///2.是否匹配// console.log(reg.test(str)) //true//3.exec()console.log(reg.exec(str)) //返回数组</script></body>
元字符：
- 普通字符
大多数的字符仅能够描述它们本身，这些字符称作普通字符。
例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
- 元字符（特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…
但是换成元字符写法：[a-z]
- 小结
| 元字符 | 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能 |
|---|---|
| 好处 | 比如英文26个字母，我们使用元字符[a-z]简洁和灵活。 |
- 元字符-
边界符：
表示位置，开头和结尾，必须用什么开头，用什么结尾。
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
| 边界符 | 说明 |
|---|---|
^ | 表示匹配行首的文本（以谁开始） |
$ | 表示匹配行尾的文本（以谁结束） |
如果 ^ 和$在一起，表示必须是精确匹配。
//1.边界符console.log(/^哈/.test('哈')) //trueconsole.log(/^哈/.test('哈哈')) //trueconsole.log(/^哈/.test('五哈')) //falseconsole.log(/^哈$/.test('哈')) //true 只有这个情况为true，否则全是falseconsole.log(/^哈$/.test('哈哈'))//falseconsole.log(/^哈$/.test('五哈'))//false
- 元字符-
量词：
表示重复次数。
量词用来设定某个模式出现的次数。
| 量词 | 说明 |
|---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
？ | 重复零次或一次 |
{n} | 重复n次 |
{n，} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
注意：逗号左右两侧千万不要出现空格。
//量词 * 类似 >=0 次console.log(/^哈$/.test('哈'))//trueconsole.log(/^哈*$/.test(''))//trueconsole.log(/^哈*$/.test('哈'))//trueconsole.log(/^哈*$/.test('哈哈'))//trueconsole.log(/^哈*$/.test('五哈很傻'))//falseconsole.log(/^哈*$/.test('哈很傻'))//falseconsole.log(/^哈*$/.test('哈很哈'))//falseconsole.log('--------------')//量词 + 类似 >=1 次console.log(/^哈$/.test('哈'))//trueconsole.log(/^哈+$/.test(''))//falseconsole.log(/^哈+$/.test('哈'))//trueconsole.log(/^哈+$/.test('哈哈'))//trueconsole.log(/^哈+$/.test('五哈很傻'))//falseconsole.log(/^哈+$/.test('哈很傻'))//falseconsole.log(/^哈+$/.test('哈很哈'))//falseconsole.log('--------------')//量词 ？ 类似 0 || 1console.log(/^哈?$/.test(''))//trueconsole.log(/^哈?$/.test('哈'))//trueconsole.log(/^哈?$/.test('哈哈'))//falseconsole.log(/^哈?$/.test('五哈很傻'))//falseconsole.log(/^哈?$/.test('哈很傻'))//falseconsole.log(/^哈?$/.test('哈很哈'))//falseconsole.log('--------------')// 量词 {n} 写几，就必须出现几次console.log(/^哈{4}$/.test('哈')) //falseconsole.log(/^哈{4}$/.test('哈哈')) //falseconsole.log(/^哈{4}$/.test('哈哈哈')) //falseconsole.log(/^哈{4}$/.test('哈哈哈哈')) //trueconsole.log(/^哈{4}$/.test('哈哈哈哈哈')) //falseconsole.log(/^哈{4}$/.test('哈哈哈哈哈哈')) //falseconsole.log('--------------')// 量词 {n,} >=nconsole.log(/^哈{4,}$/.test('哈')) //falseconsole.log(/^哈{4,}$/.test('哈哈')) //falseconsole.log(/^哈{4,}$/.test('哈哈哈')) //falseconsole.log(/^哈{4,}$/.test('哈哈哈哈')) //trueconsole.log(/^哈{4,}$/.test('哈哈哈哈哈')) //true console.log(/^哈{4,}$/.test('哈哈哈哈哈哈')) //trueconsole.log('--------------')// 量词 {n,m} 逗号左右两侧千万不能有空格 >=n && <= mconsole.log(/^哈{4,6}$/.test('哈')) //falseconsole.log(/^哈{4,6}$/.test('哈哈')) //falseconsole.log(/^哈{4,6}$/.test('哈哈哈')) //falseconsole.log(/^哈{4,6}$/.test('哈哈哈哈')) //true console.log(/^哈{4,6}$/.test('哈哈哈哈哈')) //true console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈')) //true console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈')) //false
- 元字符-
字符类：
比如\d 表示0~9。
1.[ ] 匹配字符集合
后面的字符串只要包含abc中任意一个字符，都返回true。
// 字符类 [abc] 只选1个console.log(/^[abc]$/.test('a')) // trueconsole.log(/^[abc]$/.test('b')) // trueconsole.log(/^[abc]$/.test('c')) // trueconsole.log(/^[abc]$/.test('ab')) // falseconsole.log(/^[abc]{2}$/.test('ab')) // true
2.[ ] 里面加上 - 连字符：[A-Z]
使用连字符 - 表示一个范围。
console.log(/^[A-Z]$/.test('P')) // true
比如：
[a-z] | 表示a到z26个英文字母都可以 |
|---|---|
[a-zA-Z] | 表示大小写都可以 |
[0-9] | 表示0~9的数字都可以 |
// 字符类 [a-z] 只选1个console.log(/^[A-Z]$/.test('p')) // falseconsole.log(/^[A-Z]$/.test('P')) // trueconsole.log(/^[0-9]$/.test(2)) // trueconsole.log(/^[a-zA-Z0-9]$/.test(2)) // trueconsole.log(/^[a-zA-Z0-9]$/.test('p')) // trueconsole.log(/^[a-zA-Z0-9]$/.test('P')) // true3.[ ]里面加上^取反符号：[^a-z]
比如：
[^a-z] | 匹配除了小写字母以外的字符 |
|---|---|
| 注意要写到中括号里面 | - |
4..匹配除换行符之外的任何单个字符。
- 小结
字符类.(点) | 匹配除换行符之外的任何单个字符 |
|---|---|
[abc] | 匹配abc其中的任何单个字符 |
[a-z] | 匹配26个小写英文字母其中的任何单个字符 |
[^a-z] | 匹配除了26个小写英文字母之外的其他任何单个字符 |
- 练习
<title>练习-用户名验证案例</title><style>span {display: inline-block;width: 250px;height: 30px;vertical-align: middle;line-height: 30px;padding-left: 15px;}.error {color: red;background: url(./images/error1.png) no-repeat left center;}.right {color: green;background: url(./images/right.png) no-repeat left center;}</style>
</head><body><input type="text" name="" id=""><span></span><script>//1.准备正则const reg = /^[a-zA-Z0-9-_]{6,16}$/const input = document.querySelector('input')const span = input.nextElementSiblinginput.addEventListener('blur', function () {// console.log(reg.test(this.value))if (reg.test(this.value)) {span.innerHTML = '输入正确'span.className = 'right'} else {span.innerHTML = '请输入6-16位的英文数字下划线'span.className = 'error'}})</script></body>
5.预定义：指的是某些常见模式的简写方式。
| 预定类 | 说明 |
|---|---|
\d | 匹配0~9之间的任一数字，相当于[0-9] |
\D | 匹配所有0~9以外的字符，相当于[^0-9] |
\w | 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_] |
\W | 除所有字母、数字、下划线以外的字符，相当于[^A-Za-z0-9_] |
\s | 匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f] |
\S | 匹配非空格的字符，相当于[^\t\r\n\v\f] |
修饰符：
- 修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等。
/表达式/修饰符
i | 正则匹配时字母不区分大小写 |
|---|---|
g | 匹配所有满足正则表达式的结果 |
console.log(/^java$/.test('java')) //trueconsole.log(/^java$/i.test('JAVA')) //trueconsole.log(/^java$/i.test('Java')) //true
- 替换
replace替换
字符串.replace(/正则表达式/,'替换的文本')
<title>修饰符</title>
</head><body><script>console.log(/^java$/.test('java')) //trueconsole.log(/^java$/i.test('JAVA')) //trueconsole.log(/^java$/i.test('Java')) //trueconst str = 'java是一门编程语言,学习JAVA过程很难'// const re = str.replace(/java|JAVA/g, '前端')const re = str.replace(/java/ig, '前端')console.log(re) // 前端是一门编程语言， 学习JAVA过程很难</script></body>
- 练习
<title>练习-过滤敏感字</title>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><div></div><script>const tx = document.querySelector('textarea')const btn = document.querySelector('button')const div = document.querySelector('div')btn.addEventListener('click', function () {// console.log(tx.value)div.innerHTML = tx.value.replace(/激情|基情/g, '**')tx.value = ''})</script></body>
