js 正则

最新推荐文章于 2022-03-29 09:17:24 发布

@红@旗下的小兵

最新推荐文章于 2022-03-29 09:17:24 发布

阅读量540

点赞数 1

分类专栏： ES5

本文链接：https://blog.csdn.net/qq_42778001/article/details/104630140

版权

ES5 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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))

（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)
在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搞的鬼。

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

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

也可以修改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))
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)
}

总结：

在正则设置了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 是一个全局函数，可以用来创建动态正则，在实际开发中非常有用！！！

有一些属性：

常用属性：

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

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

eg:

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

添加修饰符：

在字面量末尾添加修饰符（如/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>

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>

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>

结果：

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

@红@旗下的小兵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 正则

基础：待完善！小案例：1、去掉中横线const time = '2020-03-03'const r = /[-\s]*/glet res = time.replace(r, '') // '20200303'2、匹配汉字const text = '吕星辰'const r = /[\u4e00-\u9fa5]+/g // [] 某个范围内的字符 +匹配至少一个前...
复制链接

扫一扫

专栏目录