【JS正则表达式】一篇文章搞懂正则表达式

535 阅读4分钟

正则表达式在搜索和替换方面给我们带来了极大的便利,只要我们合理运用正则表达式,我们可以大大简化我们的代码量和代码效率

1、正则表达式的创建

字面量创建

 var test = 'abc@hahahtest'
 var one = /test/   //字面量创建
 var res = test.replace(one, 'a')
 //当我们替换的时候,第二个参数一定是字符串类型
 console.log(res)

RegExp实例化创建

var test = 'testabc@hahahtest'
var two = new RegExp("test""g") 
var res = test.replace(two, 'a')

实例化创建时,我们需要向构造函数传递一个字符串作为参数,若想添加附加条件,也就是修饰符。我们可以传入放在第二个参数位置。

对象属性

对象方法

test\exec

var str = 'abc'
var one = /\w/
var two = /\w/g
console.log(one.test(str))
console.log(two.test(str))

var two = /\w/g若不断被consolelog我们可以看到他的返回值true\false是变化的。原因很简单,就是在全局匹配时,每次执行都是从上一次查找结果处开始,也就是lastindex处开始匹配

var str = '12abc12'
var test = /\d{2}(\w)/
var res = test.exec(str)
console.log(res)   //["12a", "a", index: 0, input: "12abc12", groups: undefined]

exec的返回值是一个数组,数组第一个值是匹配到的内容,数组中剩下的值就是匹配到组合的值

正则相关方法

1、String.protatype.search

返回第一个匹配结果的index

var str = '12abc12'

var res = str.search(/\d{2}\w/)

console.log(res)  //0

2、String.protatype.split

函数会返回一个新的数组

var str = '12abc12bdb44hah'

var one = str.split(/\d{2}/)

console.log(one)
console.log(str)

3、String.protatype.match

非全局调用时

var str = '12abc12bdb4444'
var one = str.match(/\d{2}\w{3}/)
console.log(one)       //["12abc", index: 0, input: "12abc12bdb4444", groups: undefined]

每次只返回第一个匹配到的内容,同时返回的还有起始index和起始输入字符串

全局调用时

var str = '12abc12bdb4444'
var one = str.match(/\d{2}\w{3}/g)
console.log(one)   //["12abc", "12bdb"]

返回的是匹配到的所有值组成的数组

4、String.protatype.replace

方法会返回一个新的字符串,原字符串不会改变

var str = '12abc12bdb44hah'
var one = str.replace(/\d{2}/g, 'giao')
console.log(one)
console.log(str)   //giaoabcgiaobdbgiaohah
					12abc12bdb44hah

若replace中第二个参数为一个回调函数时,回调函数有四个参数

修饰符

1、"i":对大小写不敏感

2、"g": 查找所有匹配项

3、"m": 允许多行匹配

小结

当我们创建正则表达式时,如果正则表达式固定,我们最好用字面量创建的方法。

当我们的正则表达式不断改变时,我们最好用实例化创建的方法

书写规则

字符串相关匹配

首先我们要熟悉一些特殊字符在正则表达式中的写法

字符匹配

    var test = 'testabc@hahahtest'
    var two = /test[abc][a-z]/
    var res = test.replace(two, 'LLLL')
    console.log(res)

test直接匹配为'test'部分的字符串

[abc]直接匹配[]中的单个字符,若[]中有^代表取反的意思

[a-z]直接匹配[]中范围内对应的字符

预定义匹配

一些简单的规则我们经常会用到,但是每次都手写一遍比较麻烦。所以我们有预定义类规则,为我们书写规则带来便利

    var test = '87654321'
    var two = /\d./
    var res = test.replace(two, 'LL')
    console.log(res)   //LL654321

由此可见, 正则表达式为我们匹配带来极大的便利

    var test = '@haha@mmm@'
    var two = /^@/
    var three = /@$/
    var res = test.replace(two, 'LL')
    var out = test.replace(three, 'OO')
    //其中我们一定要注意这些特殊字符的摆放位置
    console.log(res)
    console.log(out)   //LLhaha@mmm@
 						@haha@mmmOO

重复匹配

当我们有同一规则要多次匹配时,js依然为我们提供了简便方法

    var test = '@12345678'
    var two = /^@\d{5}/
    var res = test.replace(two, 'LL')
    console.log(res)   //LL678

贪婪模式

    var test = '@12345678'
    var two = /^@\d{3,5}/
    var res = test.replace(two, 'LL')
    console.log(res)   //LL678

在贪婪模式下,会匹配最多数量的字符

若想取消贪婪模式var two = /^@\d{3,5}?/,我们需要在数量的最后添加一个?

分组匹配

分组分配允许我们将一定的字符串分为一组,分为一组后的字符串,接下来对其操作和单个字符相似

var str = "branbranbran2020-08-01"
var test = /(?:bran){3}(\d{4})-(\d{2})-(\d{2})/
var res = str.replace(test, '$2-$3-$1')
console.log(res)

$2-$3-$1是反向引用,它会捕获我们分组的值

前瞻

前瞻就是让我们在原本匹配字符串的基础上,另附接下俩的匹配条件,但是另附的匹配条件不会作为被替换内容

var str = 'word123word134giao'
var test = /word(?=\d{3})/g
console.log(str.replace(test, 'X'))     //X123X134giao

ES6

y修饰符

y表示粘连的意思,当你匹配到一串字符串,接在来匹配必须要紧接着上次匹配的末尾进行下一次匹配

dotAll

const re = /dot./s开启dotAll模式

分组重命名

分组可以让我们在匹配到结果后,获取分组的值。但是要通过index去访问对应的分组值,在复杂匹配的情况下,这种操作十分不方便。所以我们对各分组自行命名可以解决这个问题

分组重命名后的键值存放在group属性下

matchAll

一次性匹配所有满足条件的内容

后望

之前的js只支持前瞻,在ES9中提出了后望,其作用和前瞻相反