js 正则

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

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

基础

修饰符

(在双斜线后边的字符):

  忽略大小写 (例:test可匹配到Test、TEST、tEST等等)。

 全局匹配(符合贪婪匹配原则 - 尽可能匹配多个)

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']

 

元字符

  匹配到单个字符,除了换行和结束符( 不需要符合前边的规则,也就是除了换行和结束符都可以匹配出来 )

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)

字符串方法:

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

总结:

在正则设置了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同时存在

<div id="aaa" class="a flag main-container"></div>

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

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>

 结果:

 

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

 

©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值