介绍：正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。
正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。
总结：就是用来做规则判断的（比如我们给一个规则，然后判断用户输入的字符串是否符合该规则）。
如何使用正则表达式：
| 方法 | 描述 |
|---|---|
| exec | 一个在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）。 |
| test | 一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。 |
| match | 一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。 |
| matchAll | 一个在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）。 |
| search | 一个在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回 -1。 |
| replace | 一个在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串。 |
| split | 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。 |
课堂案例：01.如何定义正则表达式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
RegExp:正则表达式对象
/abc/：正则表达式需要包裹在 / 中间 /
*/
//定义的规则：判断一个字符串是否包含 abc
//方式一：使用 new 关键字创建
const regExObj = new RegExp(/abc/);
// console.log(regExObj)
// console.dir(regExObj)
//方式二：基于字面量的方式定义，和通过new关键字的方式是一样的
const regExObj2 = /aa/;
// 一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。
// regexObj.test(str)
console.log(regExObj.test("abaa")) //false
console.log(regExObj.test("abc")) //true
console.log(regExObj.test("abcd")) //true
console.log(regExObj.test("dabc")) //true
console.log(regExObj2.test("aa")) //true
console.log(regExObj2.test("bba")) //false
console.log(regExObj2.test("aabbcc")) //true
</script>
</body>
</html>课堂案例：02.边界符与开始和结束的理解.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
/abc/： / 表示的是边界符，有转义的效果
*/
const rg = /a/;
/*
开始符号与结束符号的限制
需求：以xxx开始，以xxx结束
^ 匹配输入的开始
$ 匹配输入的结束
*/
const rg1 = /^a/
console.log(rg1.test("abc"))
console.log(rg1.test("aabc"))
console.log(rg1.test("bcd"))
console.log("------")
const rg2 = /^abab$/ //只能以a开始，以b结束，中间只能是ba
console.log(rg2.test("abc"))
console.log(rg2.test("aabc"))
console.log(rg2.test("abcccab"))
console.log(rg2.test("aab"))
console.log("---------")
const rg3 = /^a.b$/ // . 可以匹配任意字符 除换行符
console.log(rg3.test("abbb"))
console.log(rg3.test("aabc"))
console.log(rg3.test("aba"))
console.log(rg3.test("acb"))
</script>
</body>
</html>课堂案例：03.字符集合之中括号.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
/[abc]/:表示只要匹配 [] 中的任意一个就可以了
*/
const rg = /[abc]/;
console.log(rg.test('abcaa')) //true
console.log(rg.test("aaacccbbabc")) //true
console.log(rg.test("a xbc")) //true
console.log(rg.test("a")) //true
console.log(rg.test("f")) //flase
console.log("-------------")
/*
从开始到结束只能够包含abc当中的其中一个
*/
const rg2 = /^[abc]$/
console.log(rg2.test("abc")) //false 开始和结束只能是其中的一个，不能是全部
console.log(rg2.test("a"))
console.log(rg2.test("b"))
console.log(rg2.test("c"))
console.log(rg2.test("ajjja"))
console.log("-----------")
/*
匹配：a-z -> 简写[a-z]
*/
const rg3 = /^[a-z]$/
console.log(rg3.test("a"))
console.log(rg3.test("abs"))
console.log(rg3.test("c"))
console.log(rg3.test("aa"))
console.log("-----------")
/*
/w 匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。
/d 匹配一个数字。等价于 [0-9]。
/W 匹配一个非单字字符。等价于 [^A-Za-z0-9_]。
\D 匹配一个非数字字符。等价于 [^0-9]。
总结：如果在[] 中出现 ^ ，表示取反的意思，出现在[]外面和里面是两个意思
*/
// const rg4 = /^[a-zA-Z0-9_]$/
// const rg4 = /^[\w]$/
const rg4 = /^[\W]$/
console.log(rg4.test("a"))
console.log(rg4.test("_"))
console.log(rg4.test("E"))
console.log(rg4.test("0"))
console.log(rg4.test("-"))
</script>
</body>
</html>课堂案例：04.特殊字符与大括号.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
特殊字符：
*： 匹配前一个表达式 0 次或多次。等价于 {0,}。 >= 0
+: 匹配前面一个表达式 1 次或者多次。等价于 {1,}。 >= 1
?: 匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。 0,1
*/
// const rg = /^a$/;
// const rg = /^a*$/;
const rg = /bo*/;
console.log(rg.test("a"))
console.log(rg.test("aa"))
console.log(rg.test("A ghost boooooed"))
console.log(rg.test("A bird warbled"))
console.log("-----------")
const rg1 = /a+/
console.log(rg1.test("candy"))
console.log(rg1.test("caaaaaaaaaandy"))
console.log("-----------")
const rg2 = /e?le?/ // e 可有可无
console.log(rg2.test("angel")) //el
console.log(rg2.test("angle")) //l
console.log("------------------")
/*
{n}: n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。
{n,}: n 是一个正整数，匹配前一个字符至少出现了 n 次。 >=n
{n,m}: n 和 m 都是整数。匹配前面的字符至少 n 次，最多 m 次。如果 n 或者 m 的值是 0，这个值被忽略。
*/
const rg3 = /a{2}/
console.log(rg3.test("candy")) //false
console.log(rg3.test("caandy")) //aa
console.log("------------")
const rg4 = /a{1,3}/ //满足就true
console.log(rg4.test("candy")) //a
console.log(rg4.test("caaaandy")) //
console.log("------------")
const rg5 = /^a{3,10}$/ //必须在范围里是true
console.log(rg5.test("a")) //
console.log(rg5.test("aa")) //
console.log(rg5.test("aaa")) //
console.log(rg5.test("aaaa")) //
console.log(rg5.test("aaaaa")) //
console.log(rg5.test("aaaaaaaaaaa")) //
</script>
</body>
</html>课堂案例：05.小括号的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
()：括号里的内容会被当作整体进行匹配
*/
const rg = /^(abc){2}$/ //abc 作为一个整体出现2次
console.log(rg.test("abc")) //false
console.log(rg.test("abcabc")) //true
console.log(rg.test("abca")) //false
console.log(rg.test("abcdd")) //false
console.log(rg.test("abcabcabc")) //false
</script>
</body>
</html>课堂案例：06.课堂案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
font-size: 15px;
}
.right {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<input type="text" class="input1"><span class="msg1">请输入用户名</span><br><br>
<input type="text" class="input2"><span class="msg2">请输入用户名</span><br><br>
<input type="text" class="input3"><span class="msg3">请输入邮箱</span>
<script>
const input1Obj = document.querySelector(".input1")
const input2Obj = document.querySelector(".input2")
const input3Obj = document.querySelector(".input3")
const msg1Obj = document.querySelector(".msg1")
const msg2Obj = document.querySelector(".msg2")
const msg3Obj = document.querySelector(".msg3")
//验证用户名的正则
const re1 = /^[\w]{6,10}$/;
//验证手机号的正则,第一位是1 后面的10位是0-9
const re2 = /^[1](50|35|39)[\d]{8}$/ //不加上 $ 限制结尾，就是只要超过10的都满足条件
//验证邮箱的正则
const re3 = /^[\w]@.com$/
// const re3 = /^[\w]{3,8}@(qq|163).com$/
input1Obj.addEventListener("blur", function () {
//对用户名进行校验
if (re1.test(this.value)) {
//满足条件
msg1Obj.className = 'right'
msg1Obj.innerHTML = "输入正确"
} else {
msg1Obj.className = 'error'
msg1Obj.innerHTML = "输入错误"
}
})
input2Obj.addEventListener("blur", function () {
//对手机号进行校验
if (re2.test(this.value)) {
//满足条件
msg2Obj.className = 'right'
msg2Obj.innerHTML = "输入正确"
} else {
msg2Obj.className = 'error'
msg2Obj.innerHTML = "输入错误"
}
})
input3Obj.addEventListener("blur", function () {
//对手机号进行校验
if (re3.test(this.value)) {
//满足条件
msg3Obj.className = 'right'
msg3Obj.innerHTML = "输入正确"
} else {
msg3Obj.className = 'error'
msg3Obj.innerHTML = "输入错误"
}
})
</script>
</body>
</html>课堂案例：07.replace使用正则.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
论坛：<div></div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<script>
/*
需求：需要对发布的信息中关键字进行过滤
*/
const divObj = document.querySelector("div")
const textareaObj = document.querySelector("textarea")
const btnObj = document.querySelector("button")
//对发布的信息过滤
btnObj.addEventListener("click",function(){
/*
g:表示全局替换
i：忽略大小写
*/
divObj.innerHTML = textareaObj.value.replace(/卧槽|傻瓜|sb/gi,'**')
})
/*
需求2：通过正则实现如下需求
日期：2022-11-12
像输出结果为：12-11-2022
*/
const re1 = /(\d{4})-(\d{2})-(\d{2})/
const strDate = "2022-12-31"
/*
分别代表括号内的内容
$1 =(\d{4})
$2 =(\d{2})
$3 =(\d{2})
*/
//方式一
const result = strDate.replace(re1,"$3/$2/$1")
// const result = strDate.replace(re1,"$3-$2-$1")
// const result = strDate.replace(re1,"$3*$2*$1")
console.log(result)
//方式二
const result2 = strDate.replace(re1,function(){
return RegExp.$3+"-"+RegExp.$2+"-"+RegExp.$1
})
console.log(result2)
//方式三
const result3 = strDate.replace(re1,function(match,year,month,day){
console.log("match = "+match) //第一个参数输出原来的数
console.log("year = "+year)
console.log("mouth = "+month)
console.log("day = "+day)
return day+"-"+month+"-"+year;
})
console.log(result3)
</script>
</body>
</html>课堂案例：08.match方法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
match方法: 一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。
*/
const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);
console.log(found);
// Expected output: Array ["T", "I"]
</script>
</body>
</html>