js正则表达式-基础篇

559 阅读4分钟

学习 基础篇

基本语法

[xyz]匹配括号内任意一个字符串
[^xyz]相反,不匹配括号内的字符
[\s]匹配任意空白符(空格、换行、回车等)
[\S]不匹配空白符
[\w]匹配字母、数字、下划线
[\W]不匹配字母、数字、下划线
[\d]匹配数字
[\D]不匹配数字
[\b]匹配单词边界
[\B]不匹配单词边界,匹配其他边界
.匹配任意字符
匹配其实位置
$匹配结束位置

上面表格是我们经常用的正则规则,下面一一进行测试

匹配任意字符 [xyz]

//这里匹配到了字符b
/[b]/.exec('abc')
//["b", index: 1, input: "abc", groups: undefined]


'abc'.replace(/[b]/,'替换')
//"a替换c"

不匹配括号内的字符 [^xyz]

//这里匹配到了除了b之外的a和c
'abc'.match(/[^b]/g)
//["a", "c"]

'abc'.replace(/[^b]/g,'替换')
//"替换b替换"

匹配任意空白符 [\s]

这里的空白符不只是空格而已

\r回车符
\t制表符
\n换行符
\f换页符

下面我们试试

'hello world'.replace(/\s/g,'替换')
//"hello替换world"
'hello\rworld'.replace(/\s/g,'替换')
//"hello替换world"
'hello\tworld'.replace(/\s/g,'替换')
//"hello替换world"
'hello\fworld'.replace(/\s/g,'替换')
//"hello替换world"

不匹配空白符 [\S]

'hello world'.replace(/\S/g,'替换')
//"替换替换替换替换替换 替换替换替换替换替换"

匹配单词边界 [\b]

什么是单词边界呢,其实就是字面意思,一个单词有左右两个边界,看下图就明白了
image.png
连续的数字或者字母会被定义为一个单词。如果是一个符号或者标点之类的呢?看下面
image.png
符号或者标点会分隔字符串为多个单词。代码演示一下

'hello'.replace(/\b/g,'替换')
//"替换hello替换"

'hello world'.replace(/\b/g,'替换')
//"替换hello替换 替换world替换"

'hello+world'.replace(/\b/g,'替换')
//"替换hello替换+替换world替换"

> **匹配非单词边界 [\B]**

单词边界搞清楚了,非单词边界也就容易明白了,那就是不是单词边界的地方都是非单词边界~
直接上图
image.png
上代码

'hello world'.replace(/\B/g,'替换')
//"h替换e替换l替换l替换o w替换o替换r替换l替换d"

匹配单词的开头与结尾 [^] [$]

以指定类型的字符开头或者结尾的字符串才能被匹配到。举个例子看下

'hello'.match(/^h(.*)o$/g)
//["hello"]

'1hello'.match(/^h(.*)o$/g)
//null

'hello1'.match(/^h(.*)o$/g)
//null

可以看到字符串的开头与结尾都不符合的话,是无法被匹配到的。

匹配任意字符[.]

.可以匹配任意的字符,确不能匹配\n换行符。试验下

'hello\nworld'.replace(/./g,'1')
//"11111
//11111"

打印的字符串已验视换行的
基本语法就先说这么多,剩余的基本上用法都没差别。

正则标志位

正则有三个标志位

  1. ignoreCase,简写为 i
  2. global,简写为 g
  3. muitiline,简写为 m

ignoreCase,加上i就不再区分大小写

'hellow'.replace(/[W]/,'替换')
//"hellow"

'hellow'.replace(/[W]/i,'替换')
//"hello替换"

global,加上g就是全局匹配

'hellow'.replace(/[l]/,'替换')
//"he替换low"

'hellow'.replace(/[l]/g,'替换')
//"he替换替换ow"

muitiline,加上m就是**多行匹配。**有人可能就会问了加上g不就好了,为啥还要有多行匹配呢?看下面的例子
加m与不加m的区别

'hellow\nhellow'.replace(/^h/g,'替换')
//"替换ellow
//hellow"

'hellow\nhellow'.replace(/^h/gm,'替换')
//"替换ellow
//替换ellow"

如果想匹配多行的开头时,就要使用到m了,gm缺一不可

正则相关的一些属性和方法

  1. 方法 test、exec
  2. 属性 source、ignoreCase、multiline、global

方法

test方法

test方法用来执行一个检索,用来检查正则表达式与指定的字符串是否匹配,返回true或false

/^h/.test('hello world')
//true

/^w/.test('hello world')
//false

exec方法

对一个指定的字符串进行搜索匹配,返回一个数组或者null。看下代码示例

/b/.exec('abc')
//["b", index: 1, input: "abc", groups: undefined]

/d/.exec('abc')
//null


当匹配到的时候就会返回数组,数组项分别为

[0]匹配到的字符
[1]-[n]分组捕获(后面会说到)
index匹配到的字符在原字符串中索引
input原字符串

还有另一个神奇的地方,exec在加g了之后的效果。看下代码

let reg = /\w/g
let str = 'abc'
reg.exec(str)
//["a", index: 0, input: "abc", groups: undefined]
reg.exec(str)
//["b", index: 1, input: "abc", groups: undefined]
reg.exec(str)
//["c", index: 2, input: "abc", groups: undefined]
reg.exec(str)
//null

如果加了g之后exec会继续在指定字符串上查找,直到返回null。是不是很神奇,那到底是什么样的魔法能让exec记住上次匹配的结果呢
答案就是 **lastIndex **属性。我们再试一遍

let reg = /\w/g
let str = 'abc'
reg.exec(str)
//["a", index: 0, input: "abc", groups: undefined]
reg.lastIndex
//1
reg.exec(str)
//["b", index: 1, input: "abc", groups: undefined]
reg.lastIndex
//2
reg.exec(str)
//["c", index: 2, input: "abc", groups: undefined]
reg.lastIndex
//3
reg.exec(str)
//null
reg.lastIndex
//0

我们再做个测试

let reg = /\w/g
let str = 'abc'
reg.exec(str)
//["a", index: 0, input: "abc", groups: undefined]
reg.lastIndex = 0
reg.exec(str)
//["a", index: 0, input: "abc", groups: undefined]

哈哈 这下明白了吧exec方法之所以能记住上次匹配的位置,全是靠 lastIndex 这个属性来完成的

属性

source

返回正则的字符串形式

ignoreCase

返回当前正则是否设置了标志位 i

multiline

返回当前正则是否设置了标志位 m

global 返回当前正则是否设置了标志位 g

/\w/g.source
//"\w"
/\w/gmi.global
//true
/\w/gmi.multiline
//true
/\w/gmi.ignoreCase
//true

重复量词

*0次或多次
+1次或多次
0次或1次
{n}重复n次
{n,}重复n次已上
{n,m}重复n次到m次

重复量词其实是一个挺好理解的一个东西,代码示例看下吧

//0次或多次
/\d(\w*)\d/.exec('1abc1')
//["1abc1", "abc", index: 0, input: "1abc1", groups: undefined]
/\d(\w*)\d/.exec('11')
//["11", "", index: 0, input: "11", groups: undefined]

//1次或多次
/\d(\w+)\d/.exec('1abc1')
//["1abc1", "abc", index: 0, input: "1abc1", groups: undefined]
/\d(\w+)\d/.exec('11')
//null

//重复n次
/\d(\w{3})\d/.exec('1abc1')
//["1abc1", "abc", index: 0, input: "1abc1", groups: undefined]
/\d(\w{3})\d/.exec('1ac1')
//null

是不是很简单

结尾

这是基础篇,下面准备再写一篇进阶篇

未完待续~