JavaScript正则表达式概述

1 正则表达式概述

1.1 什么是正则表达式

正则表达式：是一种描述字符串结构的语法规则，是用于匹配字符串中字符组合的模式，同时正则表达式也是对象。

1.2 特点

1、正则表达式的灵活性。
2、逻辑性和功能性非常强。
3、可以迅速地用极简单的方式达到字符串的复杂控制。

1.3 正则表达式的使用

创建正则对象：

// 字面量方式
var 变量名 = /表达式/;
// RegExp构造函数方式
var 变量名 = new RegExp(/表达式/);

示例：test()方法来检测字符串是否符合正则规则

var str = "123";
var reg1 = new RegExp(/123/);
var reg2 = /abc/;
console.log(reg1.test(str)); // 匹配结果：true
console.log(reg2.test(str)); // 匹配结果：false

1.4 模式修饰符

基本语法：/表达式/[switch]
switch ：表示模式修饰符，是可选的，用于进一步对正则表达式进行设置。

模式符	说明
g	用于在目标字符串中实现全局匹配
i	忽略大小写
m	实现多行匹配
u	以Unicode编码执行正则表达式
y	粘性匹配，仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引

2 特殊字符

2.1 边界符

边界符：正则表达式中的边界符（位置符）用来提示字符所处的位置

边界符	说明
^	表示匹配行首的文本
$	表示匹配行尾的文本

示例：匹配行首为“a”，行尾为“c”，中间为“b”的字符串

var reg = /^abc$/;
console.log(reg.test("abc")); // 结果为：true
console.log(reg.test("abcd")); // 结果为false
console.log(reg.test("aabcd")); // 结果为false
console.log(reg.test("abcabc")); // 结果为false

2.2 预定义类

字符	说明
.	匹配除“\n”外的任何单个字符
\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]
\f	匹配一个换页符（form-feed）
\b	匹配单词分界符。如“\bg”可以匹配“best grade”，结果为“g”
\B	非单词分界符。如“\Bade”可以匹配“best grade”，结果为“ade”
\t	匹配一个水平制表符（tab）
\n	匹配一个换行符（linefeed）
\xhh	匹配ISO-8859-1值为hh（2个16进制数字）的字符，如“\x61”表示“a”
\r	匹配一个回车符（carriage return）
\v	匹配一个垂直制表符（vertical tab）
\hhh	匹配Unicode 值为 hhhh （4个16进制数字）的字符，如“\u597d”表示“好”

示例：“.”和“\s”的使用
match()：从str匹配一个字符，匹配规则是reg

var str = "good idea";
// gi：实现全局匹配，并忽略大小写
// 匹配空格（\s）+单个字符*2（..）
var reg = /\s../gi; // 正则对象
console.log(str.match(reg));

结果为：[ ’ id’ ]

转义特殊字符：在正则表达式中可以使用“\”转义特殊字符

var str = "^abc\\1.23*edf$";
// gi：全局匹配，匹配任意字符
// “|”代表或者
// 匹配. 匹配$ 匹配* 匹配^ 匹配\
var reg = /\.|\$|\*|\^|\\/gi;
console.log(str.match(reg));

匹配结果：[ ‘^’, ‘\’, ‘.’, ‘*’, ‘$’ ]

2.3 字符类

字符类：是一个字符集，匹配相应字符，它就会找到该匹配项。

字符	说明
\t	匹配一个水平制表符（tab）
\n	匹配一个换行符（linefeed）
xhh	匹配ISO-8859-1值为hh（2个16进制数字）的字符，如“\x61”表示“a”
\r	匹配一个回车符（carriage return）
\v	匹配一个垂直制表符（vertical tab）

字符范围示例：

pattern（模式）	说明
[cat]	匹配字符集合中的任意一个字符c、a、t
[^cat]	匹配除c、a、t以外的字符
[A-Z]	匹配字母A~Z范围内的字符
[a-z]	匹配字母a~z范围内的字符
[^a-z]	匹配字母a~z范围外的字符
[a-zA-Z0-9]	匹配大小写字母和0~9范围内的字符
[\u4e00-\u9fa5]	匹配任意一个中文字符

示例：匹配a、b、c中任何一个字符

var reg = /[abc]/;
console.log(reg.test("andy")); // 匹配到了a，结果：true
console.log(reg.test("baby")); // 匹配到了b、a，结果：true
console.log(reg.test("color")); // 匹配到了c，结果为true
console.log(reg.test("red")); // 没有匹配到，结果：false

字符组合：如果允许用户输入英文字母（不区分大小写）、数字、短横线-、下划线_的正则情况。

var reg = /^[a-zA-Z0-9_-]$/;

2.4 取反符

字符组合：当中括号“[]”与元字符“^”一起使用时，称为取反符。

示例：匹配除了小写字母a-z以外的其他字符

var rg = /^[^a-z]$/;
console.log(rg.test("a"));  // 结果为：false
console.log(rg.test("z"));  // 结果为：false
console.log(rg.test("1"));  // 结果为：true
console.log(rg.test("A"));  // 结果为：true

3 量词符与括号字符

3.1 量词符

量词符：用来设定某个模式出现的次数。

字符	说明	示例	结果
?	匹配?前面的字符零次或一次	hi?t	可匹配ht和hit
+	匹配+前面的字符一次或多次	bre+ad	可匹配范围从bread到bre…ad
*	匹配*前面的字符零次或多次	ro*se	可匹配范围从rse到ro…se
{n}	匹配{}前面的字符n次	hit{2}er	只能匹配hitter
{n,}	匹配{}前面的字符最少n次	hit{2,}er	可匹配范围从hitter到hitt…er

案例演示：

var reg = /^a*$/; // * 相当于>=0，可以出现0次或很多次
var reg = /^a+$/; // + 相当于>=1，可以出现1次或很多次
var reg = /^a?$/; // ? 相当于1||0，可以出现0次或1次
var reg = /^a{3}$/; // {3}就是重复a字符3次
var reg = /^a{3,}$/; // {3,}就是重复a字符 大于等于3次
var reg = /^a{3,16}$/; // {3,16}就是重复a字符 大于等于3次 小于等于16次

案例演示：允许用户输入6-16位的用户名

var reg = /^[a-zA-Z0-9_-]$/;
var reg = /^[a-zA-Z0-9_-]{6,16}$/;

3.2 括号字符

改变限定符的范围：

1、使用()符号前：
改变作用范围前，正则表达式：catch|er，可匹配的结果：catch、er；
2、使用()符号后：
改变作用范围后，正则表达式：cat(ch|er)，可匹配的结果：catch、cater

分组：使用小括号可以进行分组，当小括号后面有量词符时，就表示对整个组进行操作。

1、使用()符号前：
正则表达式：abc{2}，可匹配的结果：abcc
2、使用()分组后
正则表达式：cat(ch|er)，可匹配的结果：catch、cater

1、使用()分组前
正则表达式：abc{2}，可匹配的结果：abcc
2、使用()分组后
正则表达式： a(bc){2}，可匹配的结果：abcbc

3.2 捕获与非捕获

捕获：使用小括号可以进行分组，当小括号后面有量词符时，就表示对整个组进行操作。

案例演示：

var res = "1234".match(/(\d)(\d)(\d)(\d)/);
console.log(res);

案例演示：字符串内容位置替换。

var str = "Regular Capture";
var reg = /(\w+)\s(\w+)/gi;
var newstr = str.replace(reg, '$2 $1');
console.log(newstr); // 输出结果为：Capture Regular

捕获与非捕获： (?:x)方式实现非捕获。

//  非捕获
var reg = /(?:J)(?:S)/;
var res = 'JS'.replace(reg, '$2 $1');
console.log(res); // 输出结果：$2 $1

//  捕获
var reg = /(J)(S)/;
var res = 'JS'.replace(reg, '$2 $1');
console.log(res); // 输出结果：S J

3.2 贪婪与懒惰匹配

贪婪与懒惰匹配：所谓贪婪表示匹配尽可能多的字符，而惰性表示匹配尽可能少的字符。

懒惰匹配：正则匹配默认是贪婪匹配，通过 “?”符号实现惰性匹配。

var str = 'webWEBWebwEb';
var reg1 = /w.*b/gi;    // 贪婪匹配
var reg2 = /w.*?b/gi;   // 懒惰匹配
// 输出结果为：["webWEBWebwEb", index: 0, input: "webWEBWebwEb"]
console.log(reg1.exec(str));
// 输出结果为：["web", index: 0, input: "webWEBWebwEb"]
console.log(reg2.exec(str)); 

3.2 反向引用、零宽断言

反向引用：获取存放在缓存区内的子表达式的捕获内容。

var str = '13335 12345 56668';
var reg = /(\d)\1\1/gi;
var match = str.match(reg);
console.log(match); // 输出结果为：["333", "666"]

正向预查：

字符	说明	示例
x(?=y)	仅当x后面紧跟着y时，才匹配 x	Countr(?=y|ies)用于匹配Country或Countries中的Countr
x(?!y)	仅当x后不紧跟着y时才匹配 x

3.3 正则表达式优先级

正则表达式优先级：正则表达式各种符号的优先级，由高到低排列。

符号	说明
\	转义符
()、(?: )、(?=)、[]	圆括号和中括号
*、+、?、{n}、{n,}、{n,m}	限定符
^、$、\任何元字符、任何字符	定位点和序列
|	“或”操作

4 String类中的方法

4.1 match()方法

match()方法：根据正则匹配出所有符合要求的内容匹配成功后将其保存到数组中，匹配失败则返回false。

var str = "It's is the shorthand of it is";
var reg1 = /it/gi;
console.log(str.match(reg1)); // 匹配结果：["It", "it"]
var reg2 = /^it/gi;
console.log(str.match(reg2)); // 匹配结果：["It"]
var reg3 = /s/gi;
console.log(str.match(reg3)); // 匹配结果：["s", "s", "s", "s"]
var reg4 = /s$/gi;
console.log(str.match(reg4)); // 匹配结果：["s"]

4.2 search()方法

search()方法：search()方法可以返回指定模式的子串在字符串首次出现的位置，相对于indexOf()方法来说功能更强大。

var str = '123*abc.456';
console.log(str.search('.*')); // 输出结果：0
console.log(str.search(/[\.\*]/)); // 输出结果：3

4.3 split()方法

split()方法：split()方法用于根据指定的分隔符将一个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符。

案例演示：按照字符串中的“@”和“.”两种分隔符进行分割。

var str = 'test@123.com';
var reg = /[@\.]/;
var split_res = str.split(reg);
console.log(split_res); // 输出结果：["test", "123", "com"]

案例演示：正则匹配方式分割字符串时，还可以指定字符串分割的次数。

var str = 'We are a family';
var reg = /\s/;
var split_res = str.split(reg, 2);
console.log(split_res);    // 输出结果：["We", "are"]

4.4 replace()方法

replace()方法：replace()方法用于替换字符串，用来操作的参数可以是一个字符串或正则表达式。

var str = 'Regular Capture';
var reg = /(\w+)\s(\w+)/gi;
var newstr = str.replace(reg, '$2 $1');
console.log(newstr); // 输出结果为：Capture Regular

5 【案例】查找并替换敏感词

将中文字符和bad作为敏感词过滤掉。

<body style="display: flex;">
    <div>
        <p>过滤前的内容：</p>
        <textarea id="pre" cols="30" rows="10"></textarea>
        <button id="btn">过滤</button>
    </div>
    <div>
        <p>过滤后的内容：</p>
        <textarea id="res" cols="30" rows="10"></textarea>
    </div>
    <script>
        // 给按钮绑定click事件
        let btn = document.querySelector("#btn");
        btn.addEventListener("click", function () {
            // 创建正则对象：定义敏感词
            let reg = /(bad)|[\u4e00-\u9fa5]/gi;
            // 获取过滤前的内容
            let pre_value = document.querySelector("#pre").value;
            // 用“*”替换敏感词
            let res_value = pre_value.replace(reg, "*");
            // 将过滤后的字符串放入textarea
            document.querySelector("#res").value = res_value;
        })
    </script>
</body>