(day 21)JavaScript学习笔记（正则表达式3之常见正则表达式、字符串替换和字符串分割）

概述 

        这是我的学习笔记，记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript，那么这一系列的学习笔记可能会对你有所帮助。

        今天继续学习正则表达式，主要是常见正则表达式、字符串替换和字符串分割等。

  1.常见正则表达式

        在编程中常见的正则表达式有手机号码、邮箱、登录密码等。如下代码是手机验证规则的正则表达式示例：

//手机号码验证规则
var mobileRe = /^1[3-9]\d{9};
//上面的代码解释：^1 表示以数字2开头，[3-9]表示第二位是3-9之间的任意数，\d{9}表示匹配9次数字；
console.log(mobileRe.test("13800101010")); //true
console.log(mobileRe.test("10800101010")); //false

        如下是邮箱的正则表达式示例：

//我们定义@前面和后面都只能有大小写字母、数字、下划线、中划线、点；@后面的部分必须再跟一个点号，再跟一个域名，如com或cn
var emailRe =
  /^([a-zA-Z0-9]{1})([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/; //注意点和中划线要转义
//上面代码解释：
//^表示从头开始匹配
//([a-zA-Z0-9]{1})是一个分组，表示方括号中任意字符匹配一次，这样确保第一位是大小写字母或数字
//([a-zA-Z0-9_\-\.]+)是一个分组，表示方括号中任意字符至少匹配一次，方括号中\-和\.中的\都是转义字符
//([a-zA-Z]{2,5})是一个分组，表示方括号内的字符匹配2-5次
//$表示匹配结尾
console.log(emailRe.test("admin@163.com")); //true
console.log(emailRe.test("admin@163.commmmm")); //false

       如下是匹配用户名的正则表达式示例：

//假设用户名是6-15位，开头必须以大小写字母或数字开头。这个比邮箱要简单的多了。
var userNameRe = /^[a-zA-Z0-9][a-zA-Z0-9_\-\.]{5,14}$/;
console.log(userNameRe.test("abc")); //false
console.log(userNameRe.test("#123ACDS")); //false
console.log(userNameRe.test("A123_PL325")); //true

        注意我们前面的正则匹配规则里没有加全局的标志g,因为当正则表达式带有 g（全局）标志时，它会在字符串中进行全局搜索，并且每次调用.test() 或.exec() 方法后，正则表达式的lastIndex 属性会更新为下一次搜索开始的位置。因此，在第一次成功匹配后，lastIndex 被设置为字符串的末尾，会导致第二次调用 .test() 或.exec() 方法 时没有新的匹配项，因此返回false。

        如下代码演示：

var userNameRe = /^[a-zA-Z0-9][a-zA-Z0-9_\-\.]{5,14}$/g; //有全局标志g
console.log(userNameRe.test("A123_PL325")); //true
console.log(userNameRe.test("A123_PL325")); //false
console.log(userNameRe.test("A123_PL325")); //true
console.log(userNameRe.test("A123_PL325")); //false

        如果我们想要多次测试同一个字符串而不受lastIndex 的影响，我们应该移除正则表达式的g标志，或者每次调用 .test() 之前将 lastIndex重置为 0。如下代码演示：        

var userNameRe = /^[a-zA-Z0-9][a-zA-Z0-9_\-\.]{5,14}$/g; //有全局标志g
console.log(userNameRe.test("A123_PL325")); //true
userNameRe.lastIndex = 0;
console.log(userNameRe.test("A123_PL325")); //true
userNameRe.lastIndex = 0;
console.log(userNameRe.test("A123_PL325")); //true
userNameRe.lastIndex = 0;
console.log(userNameRe.test("A123_PL325")); //true

        下面我们再写一个密码验证的正则表达式：

//要求密码为8-16的密码，密码中至少包含一个大写字母，至少包含一个小写字母，至少包含一个特殊符号（@$!%*?&）组成
var passWordRe =
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/;
//上面正则表达式解释
//(?=.*[a-z])：这是一个正向先行断言（positive lookahead），它确保密码中至少有一个小写字母。.* 匹配任意数量的任意字符（包括零个字符），[a-z] 匹配一个小写字母
//(?=.*[A-Z])：同样是一个正向先行断言，确保密码中至少有一个大写字母。
//(?=.*\d)：这也是一个正向先行断言，确保密码中至少有一个数字。\d 是数字的简写。
//(?=.*[@$!%*?&])：这个正向先行断言确保密码中至少有一个指定的特殊字符。这里列出的特殊字符是 @、$、!、%、*、? 和 &。
//[A-Za-z\d@$!%*?&]{8,16}：这部分指定了密码的实际字符组成和长度。它匹配任意数量的（8到16个）大写字母、小写字母、数字以及上面提到的特殊字符。
console.log(passWordRe.test("A123PL325")); //没有小写数字，没有特殊字符：false
console.log(passWordRe.test("Aa5@")); //长度不够：false
console.log(passWordRe.test("Aa123P325@")); //true

2.字符串替换

        字符串替换我们可以用传统的方法替换特定的内容，如下代码演示：

var str = "你好，这是一个实例。";
console.log(str.replace("实例", "示例")); //你好，这是一个示例。

         我们也可以用正则表达式的方式把符合一些规则的字符替换掉，如下代码演示：

var str = "你好1，这句话22里不小心333多写了几个4数字。";
//用正则表达式把上面字符串中的数字替换掉
console.log(str.replace(/\d+/g, ""));//输出：你好，这句话里不小心多写了几个数字。

         我们还可以进行一些更复杂的匹配替换，如下是获取html中的所有的文本内容：

var html = `<span>hello</span><div>world</div>`;
var pattern = /<[^>]+>([^<>]+)<\/[^>]+>/g;
//上面正则表达式的解释如下：
//<[^>]+>: 匹配一个开始标签，例如 <span> 或 <div>。这里的关键是 [^>]+，它表示匹配一个或多个不是 > 的字符。
//([^<>]+): 这是一个捕获组，它匹配一个或多个不是 < 或 > 的字符，即标签之间的文本内容。
//<\/[^>]+>: 匹配一个结束标签，例如 </span> 或 </div>。
console.log(html.replace(pattern, "$1 "));//输出：hello world 
//$1 是正则表达式中的第一个捕获组，即标签之间的文本内容。

 3.字符串分割

        另外一个接受正则表达式的方式是分割字符串，它可以用来一些特定的字符对字符串进行分割，然后返回分割后的数组，如下代码示例用单一的字符来分割：        

var str = "html,css,javascript";
//正常的分割，以逗号分割
console.log(str.split(",")); //输出：(3) ['html', 'css', 'javascript']

        当我们字符串中的分割符不是单一的字符，但是符合一定规则的时候，可以用正则表达式，如下代码：

var str = "This   |  is  ,an  %  apple";
//用正则表达式以不是大小写字母和数字来分割
console.log(str.split(/\W+/g)); //输出：(4) ['This', 'is', 'an', 'apple']

4.正则表达式常用字符

        正则表达式的字符有很多，以下是列举的常用字符，也算是为正则表达式的篇章做个小结。

字符	描述
.	匹配任意单个字符（除了换行符）
^	匹配字符串的开始位置
$	匹配字符串的结束位置
*	匹配前面的子表达式零次或多次
+	匹配前面的子表达式一次或多次
?	匹配前面的子表达式零次或一次
{n}	匹配前面的子表达式恰好n次
{n,}	匹配前面的子表达式至少n次
{n,m}	匹配前面的子表达式至少n次，但不超过m次
`	`
[...]	字符集。匹配方括号中的任意单个字符
[^...]	否定字符集。匹配不在方括号中的任意单个字符
\d	匹配一个数字字符，等价于 [0-9]
\D	匹配一个非数字字符，等价于 [^0-9]
\w	匹配一个单词字符（字母、数字或下划线），等价于 [a-zA-Z0-9_]
\W	匹配一个非单词字符，等价于 [^a-zA-Z0-9_]
\s	匹配任何空白字符，包括空格、制表符、换页符等
\S	匹配任何非空白字符
\b	匹配一个单词边界
\B	匹配一个非单词边界
(...)	捕获括号，表示一个组
(?:...)	非捕获括号，表示一个组，但不捕获匹配的文本
(?=...)	正向前瞻断言，表示某个模式后面必须跟着
(?!...)	负向前瞻断言，表示某个模式后面不能跟着
(?<=...)	正向后顾断言，表示某个模式前面必须跟着
(?<!...)	负向后顾断言，表示某个模式前面不能跟着
\	转义字符，用于转义特殊字符或指定特殊序列（如 \n 表示换行符）

        以上便是今天的学习内容，如果对你有所帮助，请点个赞再走吧。