js 正则

小咪咪 2023-07-10 14:27 47阅读 0赞

2020/06/20 - 补充：vue2.0+模板编译正则部分。

2020/06/29 - 补充：删除标签字符串中的指定标签 。

2021/04/30 - 补充：lastIndex属性 和 圆形方法exec( )

## 基础 ##

### **修饰符** ###

**（在双斜线后边的字符）：**

> **i **   忽略大小写 (例：test可匹配到Test、TEST、tEST等等)。
> 
> **g **  全局匹配（符合贪婪匹配原则 - 尽可能匹配多个）
> 
> **m**   换行匹配（ 对获取textarea元素的值很有用 ）

### **字符集 - 方括号 ** ###

**关键字：范围、单个**

**（查找某个范围内的字符 - 匹配出来的是单个字符）：**

> **\[abc\]         **匹配在方括号中的字符，可以匹配a或b或c
> 
> **\[^abc\]**       匹配除了方括号中的任何字符，匹配 除 a或b或c的字符
> 
> **\[0-9A-z\] **   匹配数字0到9 或 英文字母（大小写都行）中的任何字符
> 
> *tips:* 
> 
> *（1）方括号只能匹配指定区间内的单个字符，匹配到的结果会组成一个数组；*
> 
> *（2）**^** 在方括号中是取反的意思 ，与js中的！相同。*
> 
>     // 匹配除2或1或3的
>     const time = ' 32020'
>     const r = /[^213]/g
>     let res = time.match(r) // [ '0', '0' ]
> 
>

###  **括号** ###

**关键词：分组、或、捕获**

**（） 分组匹配，**匹配的是一个整体，可匹配多个字符，就是如果要匹配abc，只有abc连在一起的才能匹配到。

> *tips:* 
> 
> （1）与方括号不同，圆括号是匹配一个整体；
> 
> （2）圆括号内优先运算
> 
> （3）圆括号里边可以写 | 表示 或，与js中的 || 功能一样
> 
>     const time = 'abcfabhbc'
>     const r = /(abc|ab)/g
>     let res = time.match(r) // [ 'abc', 'ab' ]
> 
> **（4）$1、··· ···**
> 
> $1、$2、$3、$4 ··· ··· 匹配的是前边的分组( 相当于复制了一份前边的组（也就是括号里边匹配的内容） )
> 
> 下边是分组匹配很经典的例子，电话号中间星号展示：
> 
>     // 参数一是第一个括号的内容，参数二是第二个括号的内容，中间所匹配的内容会被星号替换
>     const time = '13181006100'
>     const r = /(\d{3})\d{4}(\d+)/g
>     let res = time.replace(r, '$1****$2') // '131****6100'
> 
> **（5）反向引用**
> 
> 先解释下：所谓反向引用相当于复制了一份前边小括号中匹配的内容。。。 
> 
> 在 《 javaScript 忍者秘籍第二版 》中解释：
> 
> 正则表达式中最复杂的术语是反向引用，反向引用可引用正则中定义的捕获。
> 
> 反向引用子表达式（子表达式就是括号中的内容）的内容  ** \\1    \\2     \\3    ··· ···**
> 
> **\\1** 会反向引用（复制）第一个括号匹配的内容
> 
> **\\2** 会反向引用（复制）第二个括号匹配的内容
> 
> **\\3** 会反向引用（复制）第三个括号匹配的内容
> 
> 依次类推  **··· ···**
> 
>     // \1 只会引用 ([0-9]),所以 0还会被赋值一份 -> 020
>     let str = '020'
>     let reg = /([0-9])2\1/g
>     console.log(str.match(reg))
> 
>  \*\*\* 反向引用时，前边必须是一个分组（括号）的格式 \*\*\*
> 
>     // \1 会引用（就是复制而已）第一个子表达式 (\w) 里边的内容, 第一次：匹配a，在复制一次，
>     // 组成aa，然后判断aa是否符合字符串，符合则aa被匹配,；第二次匹配与第一次一样。
>     const s =  'aaaa'
>     const reg = /(\w)\1/g
>     const r = s.match(reg) // ['aa', 'aa']
> 
>     const s =  'aabb'
>     const reg = /(\w)\1(\w)\2/g // \1 反向引用第一个子表达式里边的内容, \2 反向引用第二个子表达式内容
>     const r = s.match(reg) // ['aabb']
> 
> 匹配标签, 使用 **反向引用** 可以非常方便匹配某个标签 ：
> 
>     let str = '<div>123</div>'
>     let reg = /<(\w+)>(.+)<\/\1>/
>     console.log(str.match(reg))
> 
> ![20200625131734962.png][]

> **（6）正向预查** 
> 
> ?=n
> 
> 可以把**等号**后边跟着n的 前边的字符匹配出来（匹配的是问号前边的字符）
> 
>     let reg = /(?=(abc))/g
>     let s = 'abc'
>     console.log(s.match(reg)) // ['']
> 
>     const s =  'aaabaa'
>     const reg = /\w(?=b)/g
>     const r = s.match(reg)  //匹配出a后边跟着b的a  ['a']
> 
>

### **元字符** ###

> **( 1 ) 点字符**
> 
> **.   ** 匹配到单个字符，除了换行（\\n）、回车（\\r）、行分隔符（\\u2028）和段分隔符（\\u2029）( 不需要符合前边的规则，也就是除了换行和结束符都可以匹配出来 )
> 
>     const time = 'a1bcf'
>     const r = /(\w.)/g
>     let res = time.match(r) // [ 'a1', 'bc' ]
> 
> **\\w\\W**  匹配单词字符和非单词字符（ 所谓的单词字符包含：**大小写字母、数字、下划线  **等于  **\\w** ）
> 
> **\\d\\D**   匹配数字  -  等价于\[0-9\]   ** 和**   非数字字符 - 等价于\[^0-9\]
> 
> **\\s\\S**   匹配空白字符和非空白字符
> 
> 字符边界情况：
> 
> **\\b\\B**   匹配单词的边界   和  非单词边界（也就是单词内部），如：
> 
> 可匹配最左边 和 最右边
> 
>     const time = '1abcf2'
>     const r = /(\b)/g
>     let res = time.match(r) // [ '', '' ]
> 
> **\\n  \\f  \\r  \\t   \\v **  匹配换行符、换页符、回车符、制表符、垂直制表符（这些不太常用）
> 
> **\[\\u4e00-\\u9fa5\]   **匹配汉字

### **量词** ###

\*\*（必须要符合前边的规则才能匹配到！假如前边规则是一个数字，后边匹配到的所有字符必须是数字才行）

> **n\*         **匹配0个或多个字符
> 
> **补充:**
> 
> n\* 匹配0个多个，这句话在正常模式中（贪婪模式）一点毛病都没有，所以你会发现使用\*后空字符也会被匹配到，贪婪模式下，会尽可能多匹配，而 星号 **\* 会**匹配0个或多个，所以最后0个（空字符）也被匹配到了 ：
> 
>     let str = "abc8-def.ghi"
>     let reg = /[a-zA-Z_\-.0-9]*/g
>     let rr = str.match(reg)
>     console.log(rr)
> 
> ![2020062009592951.png][]
> 
> 在vue2.0+源码中，模板编译匹配标签中的属性，属性首个字符必须是**大写**或**小写字母**或**下划线。**
> 
>     const ncname = /[a-zA-Z_][\-\.0-9_a-zA-Z]*/;
> 
>

> **+ **       匹配1个或n个字符，优先匹配n个字符，相当于 \{1，\}
> 
> **? **       匹配0个或1个字符，优先匹配1个，相当于 \{0，1\}
> 
> **\{ n \}     ** 匹配n个
> 
> **\{x, y\}   **匹配x到y个字符
> 
>     const time = '2bc1l1v5'
>     const r = /[A-z]+/g
>     let res = time.match(r) // [ 'bc', 'l', 'v' ]
> 
>     const time = '2bc1l1v5'
>     const r = /\d+/g
>     let res = time.match(r) // [ '2', '1', '1', '5' ]
> 
>     const time = '2bc1l15'
>     const r = /\w{2}/g
>     let res = time.match(r) // [ '2b', 'c1', 'l1' ]
> 
>     // 贪婪匹配典型的例子，匹配的数量是1到5，在满足前边规则的情况下，
>     // 它会尽可能多的去匹配，下边它会先尝试匹配5个字符，最后没有那么多字符了
>     // 在去匹配剩下的字符。
>     const time = '2bc1l15'
>     const r = /\w{1,5}/g
>     let res = time.match(r) // [ '2bc1l', '15' ]
> 
> **n$      **匹配以n结尾的字符（在说一遍：必须要符合n的规则，且匹配的是一个整体），比如：
> 
>     let reg = /(abc)$/g
>     let s = 'abcc'
>     let ss = 'abc'
>     console.log(ss.match(reg)) // ['abc']
>     console.log(s.match(reg)) // null
> 
> **^n      **匹配以n开头的字符

**注意：**

（1）正则默认为贪婪模式，凡是表示范围区间的量词，都优先匹配上限，而不是下限。如：

let reg = /a{1,4}/g
    let s = 'aaaa'
    console.log(s.match(reg)) // ["aaaa"]

（2）有时候这不是我们想要的结果，可以在**量词后**边加上 **? ,** 可开启非贪婪模式。

这里说下，下边匹配的模式是** -** 非贪婪模式，之所以匹配4个 单独的 **“a”** , 因为加了全局匹配 g。。。

let reg = /a{1,4}?/g
    let s = 'aaaa'
    console.log(s.match(reg)) // ["a", "a", "a", "a"]

**下边案例类似：**

非贪婪模式下，会尽可能少匹配，\* 匹配0个或 多个，所以会匹配到4个空字符。

let str = 'aaa'
    let reg = /a*?/g
    console.log(str.match(reg)) // ['', '', '', '']

###  补充 ###

> **?：** 阻止分组捕获，只匹配不捕获（小括号匹配的内容不会被捕获到）
> 
> 解释下：
> 
> 在正则捕获的时候，如果正则存在分组（小括号），捕获的时候不仅仅会把大正则匹配到的字符捕获到（数组第一项），而且把小分组匹配的内容也单独抽取出来（数组第二项，也就是小括号匹配的内容）
> 
>     let str = 'l{2020}x{2021}c{2022}'
>     let reg = /\{(\d+)\}/
>     let r = str.match(reg)
>     /**
>     [
>       '{2020}', // 大正则匹配的内容，也就是\{(\d+)\} 匹配的内容
>       '2020', // 分组匹配的内容，也就是 (\d+) 匹配的内容
>       index: 1,
>       input: 'l{2020}x{2021}c{2022}',
>       groups: undefined
>     ]
>     */
> 
> 当加上 ?： 时，分组匹配的内容不会被单独捕获到：
> 
>     let str = 'l{2020}x{2021}c{2022}'
>     let reg = /\{(?:\d+)\}/
>     let r = str.match(reg)
>     /**
>     [
>       '{2020}',
>       index: 1,
>       input: 'l{2020}x{2021}c{2022}',
>       groups: undefined
>     ]
>     */
> 
> 《javascript忍者之秘籍》中的小例子：
> 
> 这个题有点意思，加上阻止捕获之后，反向引用将不会引用第一个分组, 会去引用下一个分组！
> 
>     let str = 'ninja-trick-trick'
>     let reg = /(?:ninja)-(trick)?-\1/g
>     console.log(str.match(reg)) // ["ninja-trick-trick"]
> 
>

> ### test() 方法 ###
> 
>     let reg = /\w+/g
>     let s = 'abc'
>     let r = reg.test(s)
>     console.log(r)

**补充：**

### **lastIndex** ###

**使用字面量创建正则表达式时，如果不加g全局匹配，它只会匹配一次，但是如果加了g之后，会把字符串中所有匹配项都匹配出来。**

由test方法引出lastIndex属性，在加全局匹配之后，来看一个似乎非常奇怪的现象：

let reg = /ab/g;
    let str = 'abab';
    
    console.log(reg.test(str)) // true
    console.log(reg.test(str)) // true
    console.log(reg.test(str)) // false
    console.log(reg.test(str)) // true

为什么会有这样的结果呢，先来正常分析下，第一次匹配会匹配前两个，返回true；第二次匹配会匹配后两个，返回true，当第三次匹配时字符串已经没有匹配项了，所以返回false，都很正常，但是第四次匹配时，又是true，什么原因？正是lastIndex搞的鬼。

![20210430091332532.png][]

在全局匹配时，正则中会有一个属性lastIndex，我理解的意思是：每次匹配完下一次匹配索引位的记录，可以把lastIndex理解为一个移动指针；

未匹配之前lastIndex为0，开始匹配，如果匹配到结果，lastIndex为匹配结果的最后一个字符的下一个字符的索引位（也就是下一次开始搜索的起始位），可能文字表述起来很抽象，下边画图解释：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

也可以修改lastIndex属性。

> ### 字符串方法： ###
> 
> ### **replace() 方法** ###
> 
> 参数二是一个回调函数，对匹配的内容进行处理,回调函数 - **参数一：**大正则匹配的内容；**参数二：**分组匹配的内容
> 
>     let str = 'l{2020}x{2021}c{2022}'
>     let reg = /\{(\d+)\}/g
>     let r = str.replace(reg, function(a, b) {
>         console.log('1', a) // {2020} {2021} {2022}
>         console.log('2', b) // 2020 2021 2022
>     })
> 
> 补充：
> 
> replace参数二也可以是一个字符串：
> 
> 下边 replace 中参数二 '$s1' 匹配出的是前边分组， 所以最后结果：会把前边分组匹配的内容 返回。
> 
>     // 匹配出 './user.js' 或 './b.js' 中的文件名
>     const s = './user.js'
>     const reg = /^\.\/(.*)\.js$/
>     let fileName = s.replace(reg, '$1') // user
> 
> ##  match() 方法 ##
> 
> **返回值：**如果匹配成功，返回的是一个数组，其中存放匹配的结果。如果未找到，则返回值为null。
> 
> **注意：**如果正则中有g，则该方法与正则对应的exec方法行为不同，会一次性返回所有的匹配结果。
> 
>     const reg = /(foo|a)/g;
>     const str = 'table football, foosball';
>     console.log('匹配的结果：', str.match(reg))
> 
> ![20210428142020958.png][]
> 
>  
> 
> ## exec() 方法 ##
> 
> **返回值：**匹配到结果，返回一个数组，否则返回null
> 
> 数组参数：
> 
> 第一项：整个匹配成功的结果；后边的成员就是圆括号对应的匹配成功的组。也就是说，第二成员对应第一个括号，第三个成员对应第二个括号，以此类推。
> 
> index：每次匹配成功的起始索引，从0开始；
> 
> input：整个原字符串；
> 
>     let reg = /(ab)ab/g;
>     let str = 'abab';
>     
>     console.log(reg.exec(str)) // ["abab", "ab", index: 0, input: "abab", groups: undefined]
>     console.log(reg.lastIndex) // 4
> 
> 利用g修饰符允许多次匹配的特点，可以用一个循环，完成全部匹配，下面代码中，只要`exec()`方法不返回`null`，就会一直循环下去，每次输出匹配的位置和匹配的文本：
> 
>     let reg = /a/g;
>     let str = 'ababaa';
>     
>     let res;
>     while(res = reg.exec(str)) {
>     	console.log('res', res)
>     	console.log('lastIndex:', reg.lastIndex)
>     }
> 
> ![20210430105824813.png][]

> **总结：**
> 
> 在正则设置了g的情况下，捕获的内容只有大正则匹配的内容，小分组（小括号）匹配的内容不会被单独抽离出来。
> 
> 小例子：
> 
>     // 把下边 字符串转化为：04/09 17:55
>     let str = '2020/04/09 17:55:20'
>     // 加了?: 表示匹配不捕获 ["2020", "04", "09", "17", "55", "20"]
>     // 如果不加?: ["2020", "/", "4", "/", "09", " ", "17", ":", "55", ":", "20"]
>     let reg = str.split(/(?:\/| |:)/)
>     let [,month, date, hours, minutes] = reg
>     let r = `${month}/${date} ${hours}:${minutes}` // '04/09 17:55'
> 
>

**补充：**

### 正则创建 ###

**两种方法：**

**（1）字面量**

**（2）使用new RegExp**

RegExp 是一个全局函数，可以用来创建动态正则，在实际开发中非常有用！！！

有一些属性：

![2020062209424831.png][]

**常用属性：**

**· $\_ ** // 上一次匹配的字符串

**· $1、$2、$3、$4 ··· ···  ** // 上一次匹配的捕获分组

eg:

let reg = /\w+/g
    let s = 'abc'
    let r = s.match(reg)
    console.log(RegExp.$_)

![20200622110257300.png][]

**添加修饰符：**

在字面量末尾添加修饰符（如/test/ig）

RegExp构造函数（newRegExp("test", "ig")）

### 小案例： ###

0、解释下边正则

// 匹配1 或者 2到6之间 或者 5
    let reg = /[12-65]/g

1、去掉中横线和空白字符

const time = '2020-03-03'
    const r = /[-\s]*/g
    let res = time.replace(r, '') // '20200303'

2、匹配 汉字

const text = '吕星辰'
    const r = /[\u4e00-\u9fa5]+/g // [] 某个范围内的字符 +匹配至少一个前边的字符
    const res = text.match(r) // ['吕星辰']

3、检查字符串首或尾是否含有整数数字 / 首和尾是否含有整数数字

const s =  '-1abc1'
    const reg = /(^-?\d|\d$)/g   // 字符串首或尾是否含有数字
    const reg = /^-?\d[\w\W]*\d$/gi  // 字符串首且尾是否含有数字

4、把字符串中的中横线去掉，且首字母大写

const s =  'the-first-name-age'
    const reg = /-(\w)/g
    const r = s.replace(reg, ($, $1) => {
        console.log($, $1) // $：匹配的字符 -n -a； $1: 匹配的子表达式的内容n a
        return $1.toUpperCase() // theFirstNameAge
    })

5、字符串去重

// \1 相当于复制了一个前边的\w, 加上+等于尽可能匹配多个\1, 使用$1相当于 (\w)
    const s = 'aaaaaaaaabbbbcccccc'
    const reg = /(\w)\1+/g
    const r = s.replace(reg, '$1') // ['abc']

6、 从后往前匹配

// 它会从后往前3个3个的匹配
    const s =  '1000000'
    const reg = /(\d{3})+$/g
    const r = s.match(reg)  // ['000000']
    // 下边是从前往后3个3个的匹配，会发现少了一个0
    const s =  '1000000'
    const reg = /(\d{3})+/g
    const r = s.match(reg)  // ['100000']

7、给一个数表示成千分制，比如： 1000000 表示成：**1,000,000**

这个题貌似是百度（腾讯）面试题：

// 分析下：此题一定要从后往前3个3个匹配，(\d{3})+$) -> 实现从后往前以3个为一组匹配多个
    // 前边加上 ?= 表示匹配出每一组前边的空字符，因为问号前边啥都没有，所以匹配出来的肯定为空字符
    // 到这功能就能实现了，但是有个bug，如果正好6位数，1前边也会有逗号，所以，加一个\B，排、除边缘匹配的情况 （也就是边界不匹配，匹配的是非边界）
    const s =  '1000000'
    const reg = /(?=(\B)(\d{3})+$)/g
    const r = s.replace(reg, ',')  // 1,000,000

匹配空字符：

下边?=0的意思为：**匹配出后边跟着0的空字符**

const s =  '1000'
    const reg = /(?=0)/g
    const r = s.match(reg)  // [ '', '', '' ]

**8、以4个数字为一组，以空格隔开，跟上面功能类似**

const s =  '370000000222200'
    const reg = /(?=(\B)(\d{4})+$)/g
    const r = s.replace(reg, ' ')  // '370 0000 0022 2200'

**9、去除html标签**

const  str = '<div><span></span>123</div>'
    const res = str.replace(/<[^>]+>/gi, '')
    console.log(res) // 123

**10、数字区间的匹配**

匹配18~65之间的数字

看到这种需求，很简单，把数字拆分：

**18到19做一个区间，20到59做一个区间，60到65做一个区间即可：**

// 年龄18~65之间
    let reg = /(^1[8-9]$|^[2-5]\d$|^6[0-5]$)/g

**11、匹配身份证**

**解析：**

身份证前6位代表：**地域**

后8位代表：**出生年月日**

最后4位代表：**生成的有规律的数，其中倒数第二位 奇数表示：男，偶数表示：女**

let reg = /(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)/

**12、匹配有效的数字：**

包含：正整数、负数、零、小数、整数（比如：-12.33、-12、12.111、0、+2、-2、+0、-0）

以下是非法的：02.3、.5、6. 、02

// 有效的数字
    // 以-号或+号开头，0到1个，一个数字或者多个数字时必须以1开头，小数点可有可无，
    // 如果有小数点，后边必须跟着数字，最后以数字结尾
    let reg = /^[-+]?(\d|([1-9]\d+))(\.\d+)?$/g

13、邮箱匹配

**邮箱规则**：

**xxx@xxx.xx** 分为3部分

**第一部分：**数字、字母、下划线、-、. 但是 - 和 . 不能作为开头，也不能连续出现-或者.

**第二部分：**xxx.xx.xx 或 xxx.xx 或 xxx.xx.xx.xx 或 xxx-xxx-xx.xx.xx

**第三部分：**字母或数字

const reg = /^\w+([-.]\w+)*@[A-z0-9]+([-.][A-z0-9]+)*(\.[A-z0-9]+)$/g

**14、匹配标签且删除**

网上很多人问怎么用正则匹配标签，其实很简单，但是有细节：

如：把下边    <div class="flag"> <span>123</span> </div>   标签去掉

<div class="wrapper">
        <div class="box">box
            <div class="content">content</div>
            <div class="flag">
                <span>123</span>
            </div>
            <div>12321</div>
        </div>
        <div class="box">box
            <div class="content">content</div>
            <div class="flag">
                <span>123</span>
            </div>
            <div>12321</div>
        </div>
    </div>
    <script>
    let d = document.getElementsByClassName('wrapper')[0]
        const r = d.innerHTML // 全部选出来
        // 正则匹配字符串，空白/非空白字符选中任何字符，* 0个或多个， ? 取消贪婪
        // （也就是尽可能少匹配，默认是贪婪匹配），如果不加 ? ，后边<div>12321</div> 
        // 也会被匹配到
        let reg = /\<div class="flag">[\s\S]*?\<\/div>/ig
        let re = r.replace(reg, '')
        d.innerHTML = re
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

**15、《javaScript忍者秘籍第二版》中的例子：**

**获取指定class类名的标签**

**分析：**

该正则表达式匹配字符串开始或空格，接着是指定的class名称，最后以空格或字符串结束。注意在正则\\\\s中双反斜线（\\\\）的使用。当使用反斜线创建正则表达式字面量时，只需使用一个反斜线。但是由于在字符串中写反斜线，必须使用双反斜线进行转义。这很烦琐，但是，需要意识到我们是使用字符串构建正则表达式，而不是直接使用字面量。

<div id="div1">
        <div class="d">1</div>
        <div class="d1">2</div>
        <div class="d">3</div>
    </div>
    <script>
    function findClassInElement(ele, classN) {
        const el = document.getElementsByTagName(ele || '*')
        let reg = new RegExp('(^|\\s)' + classN + '($|\\s)')
        let result = []
        for (let i = 0; i < el.length; i ++) {
            if (reg.test(el[i].className)) { // 检查每个标签的className
                result.push(el[i])
            }
        }
        return result
    }
    const r = findClassInElement('div', 'd')
    </script>

![20200625134240204.png][]

**16、vue2.0 + 源码中的 匹配标签属性正则分析：**

**首先要明白标签属性什么样：<div name="aliasName"> , name="aliasName"就是标签属性。**

看这种正则，先要从大局出发，大的分组有2个，一个是：(\[^\\s"'<>\\/=\]+)，一个是：(?:\\s\*(=)\\s\*(?:"(\[^"\]\*)"+|'(\[^'\]\*)'+|(\[^\\s"'=<>\`\]+)))

**^\\s\*** 开始时以空白字符开头0个或多个，

**(\[^\\s"'<>\\/=\]+)** 是第一个分组 - 匹配除空白字符、单双引号、左右尖角号、斜杠、等号一切一个或多个字符，这个是匹配属性的，

**(?:\\s\*(=)\\s\*(?:"(\[^"\]\*)"+|'(\[^'\]\*)'+|(\[^\\s"'=<>\`\]+)))** 第二个大分组，这个是匹配属性后边的等号和等号后边的属性值，匹配不捕获，匹配空白字符0次或多次（我一般会以匹配0个或多个称呼），也就是说等号前边可以有空白字符，(=)匹配等号，等号后边也可以有空白字符，**(?:"(\[^"\]\*)"+|'(\[^'\]\*)'+|(\[^\\s"'=<>\`\]+))** 这块就很简单了，匹配属性值，属性值可以被单、双引号包起来，或者匹配除空白字符、单双引号、左右尖角号、反撇号、等号一切字符，可匹配一次或多次。

let reg = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/g

17、匹配花括号及里边内容

**(?:.|\\r?\\n) 这个小分组前边加了?: 表示匹配不捕获**

const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g

**18、去除标签字符串中的指定标签**

这段时间一直在研究正则，网上询问这种需求的小伙伴也很多，却没有一个完美的解决答案，多数都是复制粘贴，或者解决不了实际需求，于是自己写了一个！

与上边序号为14的小例子一样，只不过下边写法解决问题范围更广一些，只需要传一个字符串，和想要删除标签的唯一标识即可：

注: 下边方法不适用于 ：

1、id和class同时存在

除上述方式以外，其他情况均适用，也欢迎各位大佬来 **"找茬"**。

function delMarkTag(template, flag) {
        let vueDataAttr = `([\\w\\-]+\\s*(=)\\s*(""|'')\\s+)*`
        let p = `[\\w\\s\\-]*`
        let classAttr = `(class|id)=(?:"(${p}${flag}${p})"|'(${p}${flag}${p})')[^>]*`
        let tagContent = `[\\w\\W]*?`
        let reg = new RegExp(`<([a-zA-Z]+)\\s+?${vueDataAttr}${classAttr}>${tagContent}<\\/\\1>`, 'ig')
        return template.replace(reg, '')
    }

eg：

只要标签中的class类名有flag的都删除掉：

<div class="box">
        <div class="a flag b"></div>
        <div class="a flag b"></div>
        <div data-v-n456n56 class="d">
            <div data-v-13877386 class="a flag main-container"></div>
            <div class="cc"></div>
            <div class="flag gg"></div>
            <div data-v-fdsfdfd class="a flag main-container"></div>
            <div class=" flag "></div>
        </div>
    </div>
    <scrpit>
     let div = document.getElementsByClassName('box')[0]
     let t = div.outerHTML
     let keyWords = 'flag'
     let o = delMarkTag(t, keyWords) // delMarkTag函数在上边
     console.log(o)
    </script>

** 结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2][]

小例子不断增加中··· ···

[20200625131734962.png]: https://img-blog.csdnimg.cn/20200625131734962.png
[2020062009592951.png]: https://img-blog.csdnimg.cn/2020062009592951.png
[20210430091332532.png]: https://img-blog.csdnimg.cn/20210430091332532.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210430101001523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[20210428142020958.png]: https://img-blog.csdnimg.cn/20210428142020958.png
[20210430105824813.png]: https://img-blog.csdnimg.cn/20210430105824813.png
[2020062209424831.png]: https://img-blog.csdnimg.cn/2020062209424831.png
[20200622110257300.png]: https://img-blog.csdnimg.cn/20200622110257300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200517113603658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[20200625134240204.png]: https://img-blog.csdnimg.cn/20200625134240204.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200629105837810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70