­

JavaScript RegExp对象

JavaScript RegExp对象

前言

  正则表达式其本身就是一种小型的,高度专业化的编程语言,能够非常方便的对字符串进行处理。

  正则语法在各个语言中都是通用的,所以掌握它显得十分有必要。

 

创建正则

  Js中,提供两种创建正则的方式。

 

字面量创建


  使用//包裹的字面量创建方式是推荐的作法,但它不能在其中使用变量。

<script>"use strict";
​
        let str = "hello,world"; 
        let reg = /^h\w+,\w+$/; // 创建正则对象
​
        console.log(reg.test(str));  // true
</script>

 

  下面尝试使用 a 变量时将不可以查询.

<script>"use strict";
​
        let str = "hello,world"; 
​
        let a = "hello";
​
        console.log(/a/.test(str));  // false
</script>

 

  可以使用 eval() 转换为Js语法来实现将变量解析到正则中,但是比较麻烦,所以有变量时建议使用下面的构造函数创建方式。

<script>"use strict";
​
        let str = "hello,world"; 
​
        let a = "hello";
​
        console.log(eval(`/${a}/`).test(str));  // true  验证字符串中是否有hello
</script>

 

构造函数创建


  使用构造函数创建对象。

<script>"use strict";
​
        let str = "hello,world"; 
​
        let reg = new RegExp(/^h\w+,\w+$/)
​
        console.log(reg.test(str));  // true
</script>

 

  当正则需要动态创建时使用这种方式。

<script>"use strict";
​
        let str = "hello,world"; 
​
        let a = "hello";
​
        let reg = new RegExp(a);
​
        console.log(reg.test(str));  // true
</script>

 

基础语法

. 通配符


  代表匹配除\n外的任意字符。如果想匹配\n可使用s模式。

 

<script>"use strict";
​
        let str = "hello,world\nJavaScript-RegExp"; 
​
        let reg = /........../g; // 匹配十个除开\n外的任意字符
​
        console.log(str.match(reg));  // (2) ["hello,worl", "JavaScript"]
</script>

 

^ 开始符


  代表必须以某个字符开始。

 

<script>"use strict";
​
        let str = "hello,world\nJavaScript-RegExp"; 
​
        let reg = /^hello,...../g; // 必须以h开始,后面必须是ello,  然后匹配五个除开\n的任意字符。
​
        console.log(str.match(reg));  // ["hello,world"]
</script>

 

$ 结束符


  代表必须以某个字符结束。

 

<script>"use strict";
​
        let str = "hello,world\nJavaScript-RegExp"; 
​
        let reg = /Exp$/g; // 必须以p结束,前面两个字符必须是E与x
​
        console.log(str.match(reg));  // ["Exp"]
</script>

 

重复符

* 重复符


  代表可以取0到无穷位 (默认贪婪取值,可通过?取消贪婪模式)。

 

<script>"use strict";
​
        let str_1 = "hello,world\nJavaScript-RegExp";
​
        let str_2 = "h\np";
​
        let reg = /^h.*\n.*p$/g; // 必须是以h开头,可以有0个也可以有多个除\n外的任意字符,紧接\n,可以有0个也可以有多个除\n外的任意字符,必须以p结尾。
​
        console.log(str_1.match(reg));  // ["hello,world↵JavaScript-RegExp"]
        console.log(str_2.match(reg));  // ["h↵p"]  上面条件只有三个是必须的 h开头,p结束,中间必须有换行\n。所以str_2也能匹配出来
</script>

 

+ 重复符


  代表可以取1到无穷位 (默认贪婪取值,可通过?取消贪婪模式)。

 

<script>"use strict";
​
        let str_1 = "hello,world\nJavaScript-RegExp";
​
        let str_2 = "h\np";
​
        let reg = /^h.+\n.+p$/g; // 必须是以h开头,必须有1个也可以有多个除\n外的任意字符,紧接\n,必须有1个也可以有多个除\n外的任意字符,必须以p结尾。
​
        console.log(str_1.match(reg));  // ["hello,world↵JavaScript-RegExp"]
        console.log(str_2.match(reg));  // null  不满足条件,至少有一个
</script>

 

? 重复符


  代表可以取0到1位(默认贪婪取值,可通过?取消贪婪模式)。

 

<script>"use strict";
​
        let str_1 = "123456789";
​
        let str_2 = "23456789";
​
        let reg = /^1?23456789$/g;  // 可以以1开头,也可以不以,后面是23456789,必须是9结尾
​
        console.log(str_1.match(reg));  // ["123456789"]
        console.log(str_2.match(reg));  // ["23456789"]  
</script>

 

{n,m} 重复符


  代表匹配nm次由前面的正则表达式定义的片段(默认贪婪取值,可通过?取消贪婪模式)。

 

<script>"use strict";
​
        let str_1 = "1111111";
​
        let reg = /1{3,4}/g;  // 可以是3个1,也可以是4个1
​
        console.log(str_1.match(reg));  // ["1111", "111"]
</script>

 

{n} 精确重复


  精确匹配n个前面的表达式。

 

<script>"use strict";
​
        let str_1 = "1111111";
​
        let reg = /1{3}/g;  // 3个1
​
        console.log(str_1.match(reg));  // ["111", "111"]
</script>

 

取消贪婪


  使用?取消贪婪。

 

<script>"use strict";
​
        let str_1 = "1111111";
​
        let reg_1 = /1*?/g;  // 0个或者多个,取消贪婪后不取
​
        let reg_2 = /1+?/g;  // 1个或者多个,取消贪婪后取1个
​
        let reg_3 = /1??/g;  // 0个或者1个,取消贪婪后不取
        
        let reg_4 = /1{3,4}?/g;  // 3个或者4个,取消贪婪后取3个
​
        console.log(str_1.match(reg_1));  // ["", "", "", "", "", "", "", ""]
​
        console.log(str_1.match(reg_2));  // ["1", "1", "1", "1", "1", "1", "1"]
​
        console.log(str_1.match(reg_3));  // ["", "", "", "", "", "", "", ""]
​
        console.log(str_1.match(reg_4));  // ["111", "111"]
</script>

 

字符集

  在字符集中上面的字符均失去原本含义。只有- ^ \ 可以在字符集中使用。

 

[] 字符集


  其本身代表或的作用 [ab]代表a或者b

 

<script>"use strict";
​
        let str_1 = "1111111";
        let str_2 = "2222222";
​
        let reg_1 = /[12]+/g;  // 1或者2,取多个
​
        console.log(str_1.match(reg_1));  // ["1111111"]
        console.log(str_2.match(reg_1));  // ["2222222"]
</script>

 

[-] 区间符


  字符集中的 - 号代表可以取从多少到多少区间的值,ASCII码排序,比如 [a-z 0-9 A-Z]就是取全部的英文字母和数字。

 

<script>"use strict";
​
        let str_1 = "12345abcde";
​
        let reg_1 = /[a-z0-9]+/g;  // 字符可以是a-z或者0-9,取多个
​
        console.log(str_1.match(reg_1));  // ["12345abcde"]
</script>

 

[^] 排除符


  字符集中的 ^ 号代表 非 的作用。比如[^0-9]就是说这一位数并非数字。

 

<script>"use strict";
​
        let str_1 = "12345abcde";
        let str_2 = "x2345abcde";
​
        let reg_1 = /^[^0-9].+/g;  // 不能以0-9开头,紧跟着取处\n外的任意字符
​
        console.log(str_1.match(reg_1));  // null
        console.log(str_2.match(reg_1));  // ["x2345abcde"]
</script>

 

[\] 转义符


  除开在字符集中使用还可以在外部使用,它可以使所有具有特殊意义的字符失去特殊意义。并且还可以为特定的字符指定意义。

 

<script>"use strict";
​
        let str_1 = "\t\n\t\n";
​
        let reg_1 = /[\t\n]+/g;  // 取\t或\n
​
        console.log(str_1.match(reg_1));  // [" ↵   ↵"]
</script>

 

  其他的转义符会在下面介绍。这里举例只代表\可以在字符集中使用。

 

\ 转义符

  转义符除开在字符集中使用,也可以在外部使用。

 

\d 匹配任何十进制数,它相当于在字符集中使用[0-9]
\D 匹配任何非十进制数,它相当于在字符集中使用[^0-9]
\s 匹配任何空白字符,它相当于在字符集中使用[\t\n\r\f\v]
\S 匹配任何非空白字符,它相当于在字符集中使用[^\t\n\r\f\v]
\w 匹配任何字母数字下划线字符,它相当于在字符集中使用[a-z A-Z 0-9]
\W 匹配任何非字母数字下划线字符,它相当于在字符集中使用[a-z A-Z 0-9]
\b 匹配一个特殊字符边界,比如空格,&.#等(不常用)
\A 匹配字符串开始(不常用)
\Z 匹配字符串结束,如果存在换行则只匹配换行前的字符(不常用)
\z 匹配字符串结束(不常用)
\G 匹配最后匹配完成的位置(不常用)
\n 匹配一个换行符(不常用)
\t 匹配一个制表符(不常用)
\f 匹配一个分页符(不常用)

 

| 管道符

  相当于 或 请注意与字符集里的区别。|符将前后分为两段,左右看做一个整体,而[]中的或仅仅代表从众多选项中取出一个。

 

<script>"use strict";
​
        let str_1 = "abcdefabcccde";
​
        let reg_1 = /abc|def/g;  // 取abc或者def 
​
        console.log(str_1.match(reg_1));  // ["abc", "def", "abc"]
</script>

 

分组

() 分组符


  将多个元素字符看出一个元素字符进行匹配。

 

<script>"use strict";
​
        let str_1 = "asdfghjkl";
        let str_2 = "asbfghjkl";
​
        let reg_1 = /^(asd)\w+l$/g;  // 必须以asd开头,必须以l结尾
​
        console.log(str_1.match(reg_1));  // ["asdfghjkl"]
        console.log(str_2.match(reg_1));  // null
</script>

 

分组别名


  组别名使用 (?<别名>匹配规则) 形式定义。在使用match检测时需要取消g模式的全局匹配。

 

<script>"use strict";
​
        let str_1 = "//www.google.com/";
​
        let reg_1 = /^https?:\/\/w{3}\.(?<name>\w+)\.(com|cn|org|hk)/; 
​
        console.log(str_1.match(reg_1)); // ["//www.google.com", "google", "com", index: 0, input: "//www.google.com/", groups: {name: "google"}]
​
        console.dir(str_1.match(reg_1).groups.name);  // google
</script>

 

分组引用


  每一个分组都有一个编号,如1,2,3,4,5。

  \num 在匹配时引用原子组, $num 指在替换时使用匹配的组数据。

 

  如下所示,将所有的<h1-6>标签替换为<p>标签,使用编号替换。

<script>"use strict";
​
        let str_1 = `
​
                <h1>hello,world</h1>
                <h2>hello,JavaScript</h2>
                <h3>PHP,no.1!!!</h3>
​
                        `;
​
        let reg = /<(?<grade>h[1-6])>(?<content>[\s\S]*?)\/\1/gi;  // 最后的\1代表引用第一个分组的匹配规则,即grade组  [\s\S]代表匹配任意
​
​
        let new_str = str_1.replace(reg,`<p>$2</p>`);  // $2 代表拿到第二个分组的内容,即content分组。
        console.log(new_str);
​
        
        // <p>hello,world<</p>>
        // <p>hello,JavaScript<</p>>
        // <p>PHP,no.1!!!<</p>>
</script>

 

  也可以使用别名替换。$<别名>

let new_str = str_1.replace(reg,`<p>$<content></p>`);  // 拿到content分组
console.log(new_str);

 

记录取消


  通常情况下,我们的分组会记录编号方便后面使用。

  如果一个分组的内容编号不想被记录,可使用(?:)进行处理。

 

<script>"use strict";
​
        let str_1 = "123,abc,456";
​
        let reg_1 = /(?:\d+),([a-z]+),(\w+)/;
        let reg_2 = /(\d+),([a-z]+),(\w+)/;
​
        console.log(str_1.match(reg_1));  // (3) ["123,abc,456", "abc", "456", index: 0, input: "123,abc,456", groups: undefined]
        console.log(str_1.match(reg_2));  // (4) ["123,abc,456", "123", "abc", "456", index: 0, input: "123,abc,456", groups: undefined]
// 可以看到。reg_2的长度多了一位,记录了第一个分组。
</script>

 

断言匹配

  断言虽然写在扩号中但它不是组,所以不会在匹配结果中保存,可以将断言理解为正则中的条件。

 

(?=exp)


  零宽先行断言 ?=exp 匹配后面为 exp 的内容。

 

<script>"use strict";
​
        let str_1 = "hello,JavaScript";
​
        let reg_1 = /\w+(?=,JavaScript)/g;  // 匹配出后面是,JavaScript的内容
​
        console.log(str_1.match(reg_1)); // ["hello"]
</script>

 

(?<=exp)


  零宽后行断言 ?<=exp 匹配前面为 exp 的内容。

 

<script>"use strict";
​
        let str_1 = "hello,JavaScript";
​
        let reg_1 = /(?<=hello,)\w+/g;  // 匹配出前面是hello,的内容
​
        console.log(str_1.match(reg_1)); // ["JavaScript"]
</script>

 

(?!exp)


  零宽负向先行断言 后面不能出现 exp 指定的内容。

 

<script>"use strict";
​
        let str_1 = "_123";
        let str_2 = "yun23";
        let str_3 = "123";
​
​
        let reg_1 = /^(?!_)[\w]+/g;  // 匹配开始不能是下划线的
​
        console.log(str_1.match(reg_1));   // null
        console.log(str_2.match(reg_1));  // ["yun23"]
        console.log(str_3.match(reg_1));   // ["123"]
</script>

 

(?<!exp)


  零宽负向后行断言 前面不能出现exp指定的内容

 

<script>"use strict";
​
        let str_1 = "abc123   456";
​
​
        let reg_1 = /(?<!\s+)\d{3}/g;  // 前面不能是空格的三位数字
​
        console.log(str_1.match(reg_1));   // ["123"]
</script>

 

匹配模式


  正则表达式在执行时会按他们的默认执行方式进行,但有时候默认的处理方式总不能满足我们的需求,所以可以使用模式修正符更改默认方式。

 

修饰符 说明
i 不区分大小写字母的匹配
g 全局搜索所有匹配内容
m 视为多行
s 视为单行忽略换行符,使用. 可以匹配所有字符
y regexp.lastIndex 开始匹配
u 正确处理四个字符的 UTF-16 编码

 

i


  i模式匹配时不区分大小写。

 

<script>"use strict";
​
        let str_1 = "HELLO,WORLD";
​
        let reg_1 = /hello,world/i;
​
        console.log(str_1.match(reg_1));  // ["HELLO,WORLD", index: 0, input: "HELLO,WORLD", groups: undefined]
</script>

 

g


  g模式不会在第一次匹配成功后就停止,而是继续向后匹配,直到匹配完成。

 

<script>"use strict";
​
        let str_1 = "HELLO,WORLD";
​
        let reg_1 = /./g;
​
        console.log(str_1.match(reg_1));  // (11) ["H", "E", "L", "L", "O", ",", "W", "O", "R", "L", "D"]
</script>

 

m


  m模式会将每一行单独匹配,用于将内容视为多行匹配,主要是对 ^$ 的修饰

 

<script>"use strict";
​
        let str_1 = `
​
                # 1.HTML5 #
                # 2.CSS #
                # 3.JavaScript #
​
        `;
​
        let reg_1 =/^\s+# \d\.\w+ #$/gm;  // g模式,全局,m模式,多行。每一行必须是多个空格开头,#号结尾。
​
        console.log(str_1.match(reg_1));  //  ["↵↵                # 1.HTML5 #", "                # 2.CSS #", "                # 3.JavaScript #"]
</script>

 

s


  s模式将多行以一行匹配,忽略换行符\n。这代表使用.可匹配到任意字符。

 

<script>"use strict";
​
        let str_1 = `123\n456\n789`;
​
        let reg_1 =/.*/gs; 
​
        console.log(str_1.match(reg_1));  //  ["123↵456↵789", ""]
</script>

 

u


  每个字符都有属性,如L属性表示是字母,P 表示标点符号,需要结合 u 模式才有效。其他属性简写可以访问 属性的别名 网站查看。

 

  如果是一些特殊的生僻字符,那么它的字节宽度可能是4字节或更多。此时就无法正确解释出来,使用u模式可解决该问题。

<script>"use strict";
​
        let str_1 = "𝒳𝒴";
​
        let reg_1 =/𝒳𝒴/g; 
        let reg_2 =/𝒳𝒴/gu; 
​
        console.log(str_1.match(reg_1));  //   结果为乱字符"�"
        console.log(str_1.match(reg_1));  //   ["𝒳𝒴"]
</script>

 

  字符也有unicode文字系统属性 Script=文字系统,下面是使用 \p{sc=Han} 获取中文字符 han为中文系统,其他语言请查看 文字语言表

<script>"use strict";
​
        let str_1 = "云崖先生";
​
        let reg_1 = /\p{sc=Han}+/gu;
​
        console.log(str_1.match(reg_1)); // ["云崖先生"]
</script>

 

lastIndex


  RegExp对象lastIndex 属性可以返回或者设置正则表达式开始匹配的位置。

 

  必须结合 g 修饰符使用

  exec 方法有效

  匹配完成时,lastIndex 会被重置为0

 

<script>"use strict";
​
        let str_1 = "Hello,My name is YunYa,YunYa age is 19";
​
        let reg_1 = /YunYa.+/g;
​
        reg_1.lastIndex = 23;  // 从索引23处开始匹配。
​
        console.log(reg_1.exec(str_1)); // ["YunYa age is 19", index: 23, input: "Hello,My name is YunYa,YunYa age is 19", groups: undefined]
</script>

 

y


  g模式无论成功与否都会一直向后匹配,直到lastIndex等于length

  y模式也是一直向后匹配,但是只要匹配不成功就会停止。

 

<script>"use strict";
​
        let str_1 = "1211111";
​
        let reg_1 = /1/g;
​
        let reg_2 = /1/y;
​
        console.log(reg_1.exec(str_1));  // ["1", index: 0, input: "1211111", groups: undefined]
        console.log(reg_2.exec(str_1));  // ["1", index: 0, input: "1211111", groups: undefined]
​
        
        console.log(reg_1.lastIndex);  // 1
        console.log(reg_2.lastIndex);  // 1
​
        
        console.log(reg_1.exec(str_1)); // ["1", index: 2, input: "1211111", groups: undefined]
        console.log(reg_2.exec(str_1)); // null
​
        
        console.log(reg_1.lastIndex);  // 3  没找到,g模式继续
        console.log(reg_2.lastIndex);  // 0  没找到,y模式归零
</script>

 

字符串方法

  以下字符串方法都可以和正则搭配使用。

 

search


  search() 方法用于检索字符串中指定的子字符串的索引值,也可以使用正则表达式搜索,返回值为索引位置

 

<script>"use strict";
​
        let str_1 = "YunYaSir c2323182108@gmail.com";
        let reg_1 = /c\d+@\w+.?\w+?\.com/;
​
        console.log(str_1.search(reg_1));  // 9
</script>

 

match


  match()方法可以返回出匹配到的子字符串。

<script>"use strict";
​
        let str_1 = "YunYaSir c2323182108@gmail.com";
        let reg_1 = /c\d+@\w+.?\w+?\.com/;
​
        console.log(str_1.match(reg_1));
​
        // ["c2323182108@gmail.com", index: 9, input: "YunYaSir c2323182108@gmail.com", groups: undefined]
        // 查找到的内容  索引位置  被查找的字符串  分组信息
</script>

 

  如果使用g模式,返回的内容没那么详细了。

<script>"use strict";
​
        let str_1 = "YunYaSir c2323182108@gmail.com";
        let reg_1 = /c\d+@\w+.?\w+?\.com/g;
​
        console.log(str_1.match(reg_1));
​
        // ["c2323182108@gmail.com"]
</script>

 

matchAll


  match()如果不是在g模式下,那么只会检索一次。

  matchAll()是全局检索,返回一个可迭代对象。

 

<script>"use strict";
​
        let str_1 = "YunYaSir c2323182108@gmail.com c238923874@qq.com";
        let reg_1 = /c\d+@\w+.?\w+?\.com/g;
​
        let res = str_1.matchAll(reg_1);
​
        for (const iterator of res) {
                
                console.log(iterator);
        }
        
</script>

 

split


  用于使用字符串或正则表达式分隔字符串。

  如下示例,时间的分隔符不确定是那个,此时可以使用正则匹配。

 

<script>"use strict";
​
        let str_1 = "2020-08/09";
​
        let reg_1 = /[-/]/g;
​
        console.log(str_1.split(reg_1));  // (3) ["2020", "08", "09"]
        
</script>

 

replace


  replace() 方法不仅可以执行基本字符替换,也可以进行正则替换,下面替换日期连接符

<script>"use strict";
​
        let str_1 = "2020-08/09";
​
        let reg_1 = /[-/]/g;
​
        console.log(str_1.replace(reg_1,"-"));  // 2020-08-09
        
</script>

 

  字符串替换

  替换字符串可以插入下面的特殊变量名:

变量 说明
$$ 插入一个 “$”。
$& 插入匹配的子串。常用
$` 插入当前匹配的子串左边的内容。
$' 插入当前匹配的子串右边的内容。
$n 假如第一个参数是 RegExp 对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。提示:索引是从1开始

 

  将百度一下四个文字加上链接:

<body>
        <div>百度一下,你就知道</div>
</body>
<script>"use strict";
​
        let div = document.querySelector("div");
        div.innerHTML = div.innerHTML.replace("百度一下","<a href='//www.baidu.com'>$&</a>")
        
</script>

 

  回调函数

  replace()支持回调函数操作,用于处理复杂的替换逻辑。

 

变量名 代表的值
match 匹配的子串。(对应于上述的$&。)
p1,p2, … 假如replace()方法的第一个参数是一个 RegExp 对象,则代表第n个括号匹配的字符串。(对应于上述的$1,$2等。)例如,如果是用 /(\a+)(\b+)/ 这个来匹配,p1 就是匹配的 \a+p2 就是匹配的 \b+
offset 匹配到的子字符串在原字符串中的偏移量。(比如,如果原字符串是 'abcd',匹配到的子字符串是 'bc',那么这个参数将会是 1)
string 被匹配的原字符串。
NamedCaptureGroup 命名捕获组匹配的对象

 

  使用回调函数将百度一下四个字加上链接:

<body>
        <div>百度一下,你就知道</div>
</body>
<script>"use strict";
​
        let div = document.querySelector("div");
        div.innerHTML = div.innerHTML.replace("百度一下",(search,pos,source)=>  `<a href='//www.baidu.com'>${search}</a>`)
        
</script>

 

正则方法

  下面是 RegExp 正则对象提供的操作方法

 

test


  返回布尔值,是否验证成功。

  检测输入的邮箱是否合法:

 

<body>
  <input type="text" name="email" />
</body>
<script>
  let email = document.querySelector(`[name="email"]`);
  email.addEventListener("keyup", e => {
    console.log(/^\w+@\w+\.\w+$/.test(e.target.value));
  });
</script>

 

exec


  不使用 g 修饰符时与 match 方法使用相似,使用 g 修饰符后可以循环调用直到全部匹配完。

 

  使用 g 修饰符多次操作时使用同一个正则,即把正则定义为变量使用

  使用 g 修饰符最后匹配不到时返回 null

 

  计算JavaScript共出现了几次。

<body>
        <div>JavaScript的事件循环模型与许多其他语言不同的一个非常有趣的特性是,它永不阻塞。JavaScript非常优秀!</div>
</body>
<script>"use strict";
​
        let txt = document.querySelector("div").innerHTML;
        let reg = /(?<tag>JavaScript)/gi;
        let num = 0;
​
        while (reg.exec(txt)) {
                num++;
        }
​
        console.log(`JavaScript共出现:${num}次。`);
​
</script>