JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础实战

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

系列笔记：

JavaScript |（一）JavaScript简介及基本语法
JavaScript |（二）JavaScript自定义对象及函数
JavaScript |（三）内建对象 | 数组 | string对象
JavaScript |（四）正则表达式👇
JavaScript |（五）DOM简介
JavaScript |（六）DOM事件
JavaScript |（七）BOM及JSON简介 | 轮播图

文章目录

📚正则表达式
📚正则表达式字面量方式
📚字符串&正则表达式
- 🐇split()
- 🐇search()
- 🐇match()
- 🐇replace()
📚正则表达式相关语法
- 🐇量词
- 🐇检查开头结尾
- 🐇手机号规则
- 🐇邮件检测
- 🐇检测字符

📚正则表达式

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。
创建正则表达式的对象：var 变量 = new RegExp("正则表达式","匹配模式");，例如：var reg = new RegExp("a");这个正则表达式可以来检查一个字符串中是否含有a。
使用typeof检查正则对象，会返回object。
test()方法：这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//建一个忽略大小写的正则表达式对象，匹配模式为 "ab"var reg = new RegExp("ab","i");var str = "a";var result = reg.test(str);// "ab" 中的 "b" 并不在字符串 "a" 中存在，以下同理console.log(result);//falseconsole.log(reg.test("Ac"));//false</script></head><body></body>
</html>

📚正则表达式字面量方式

语法：var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单，使用构造函数创建更加灵活。
[]里的内容也是或的关系
- [ab] == a|b
- [a-z] 任意小写字母
- [A-Z] 任意大写字母
- [A-z] 任意字母
- [0-9] 任意数字
- [^ ] 除了

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//var reg = new RegExp("a","i");var reg = /a/i;console.log(reg.test("abc"));//true//创建一个正则表达式，检查一个字符串中是否有a或b//使用 | 表示或者的意思reg = /a|b|c/;//创建一个正则表达式检查一个字符串中是否有字母reg = /[A-z]/;//检查一个字符串中是否含有 abc 或 adc 或 aecreg = /a[bde]c/;//[^ ] 除了reg = /[^ab]/;reg = /[^0-9]/;//包含字母"a"，而不仅仅是数字console.log(reg.test("12a3456"));//true</script></head><body></body>
</html>

📚字符串&正则表达式

🐇split()

可以将一个字符串拆分为一个数组。
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。
这个方法即使不指定全局匹配，也会全都插分。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var str = "1a2b3c4d5e6f7";//根据任意字母来将字符串拆分var result = str.split(/[A-z]/);console.log(result);</script></head><body></body>
</html>

在这里插入图片描述

🐇search()

可以搜索字符串中是否含有指定内容。
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1。
它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串。
serach()只会查找第一个，即使设置全局匹配也没用。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">str = "hello abc hello aec afc";//搜索字符串中是否含有abc 或 aec 或 afcresult = str.search(/a[bef]c/);console.log(result);//6</script></head><body></body>
</html>

🐇match()

可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索。
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。
可以为一个正则表达式设置多个匹配模式，且顺序无所谓。
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">str = "1a2a3a4a5e6f7A8B9C";result = str.match(/[a-z]/ig);console.log(result);</script></head><body></body>
</html>

在这里插入图片描述

🐇replace()

可以将字符串中指定内容替换为新的内容。
参数：
- 1.被替换的内容，可以接受一个正则表达式作为参数
- 2.新的内容
- 默认只会替换第一个

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">str = "1a2a3a4a5e6f7A8B9C";result = str.replace(/[a-z]/gi , "@_@");console.log(result);//1@_@2@_@3@_@4@_@5@_@6@_@7@_@8@_@9@_@</script></head><body></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">var str = prompt("请输出任意的内容:");str = str.split("").reverse().join("");alert(str);</script></head><body></body>
</html>

在这里插入图片描述

📚正则表达式相关语法

🐇量词

通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用
{n} 正好出现n次
{m,n} 出现m~n次
{m,} m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个，相当于{0,1}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">// 创建一个正则表达式检查一个字符串中是否含有aaavar reg = /a{3}/;// false，"abbc"中不含有连续的三个'a'console.log(reg.test("abbc")); // true，"aaabbc"中含有连续的三个'a'console.log(reg.test("aaabbc")); reg = /ab{1,3}c/;// true，"abaabbc"中含有'a'后跟着1到3个'b'，再后是'c'console.log(reg.test("abaabbc")); reg = /a{3,}c/;// false，"aaabbc"中含有连续的三个'a'，但接着是'b'console.log(reg.test("aaabbc")); reg = /ab+c/;// true，"aaabbc"中含有'a'后跟着至少一个'b'，再后是'c'console.log(reg.test("aaabbc")); reg = /ab*c/;// true，"aaabbc"中含有'a'后跟着任意个'b'（可能是0个），再后是'c'console.log(reg.test("aaabbc")); // false，"aaabbc"中含有'a'，但后跟着不是0或1个'b'，再后是'c'reg = /ab?c/;console.log(reg.test("aaabbc")); </script></head><body></body>
</html>

🐇检查开头结尾

^ 表示开头
$ 表示结尾

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">reg = /^a/; //匹配开头的aconsole.log(reg.test("abcabca"));//truereg = /a$/; //匹配结尾的aconsole.log(reg.test("abcabca"));//true//如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式reg = /^a$/;console.log(reg.test("bbca"));//false</script></head><body></body>
</html>

🐇手机号规则

以1开头
第二位3-9任意数字
三位以后任意数字9个

^1 [3-9] [0-9]{9}$

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个正则表达式，用来检查一个字符串是否是一个合法手机号var Str = "13067890123";var Str2 = "12345678909"var phoneReg = /^1[3-9][0-9]{9}$/;console.log(phoneReg.test(Str));//trueconsole.log(phoneReg.test(Str2));//false</script></head><body></body>
</html>

🐇邮件检测

任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;var email = "abc.hello@163.com";console.log(emailReg.test(email));//true</script></head><body></body>
</html>

🐇检测字符

. 表示任意字符
在正则表达式中使用\作为转义字符，\. 来表示.，\\ 表示\
注意：使用构造函数时，由于它的参数是一个字符串，而****是字符串中转义字符，如果要使用\则需要使用\\来代替。
\w：任意字母、数字，_ [A-z0-9_]
\W：除了字母、数字，_ [^A-z0-9_]
\d：任意的数字， [0-9]
\D：除了数字， [^0-9]
\s：空格
\S：除了空格
\b：单词边界
\B：除了单词边界

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个正则表达式检查一个字符串中是否含有单词childreg = /\bchild\b/;console.log(reg.test("hello child "));//接收一个用户的输入var str = prompt("请输入你的用户名:");//去除空格str = str.replace(/\s/g , "");console.log(str);//去除开头的空格//str = str.replace(/^\s*/, "");//去除结尾的空格//str = str.replace(/\s*$/, "");</script></head><body></body>
</html>