学习 基础篇

基本语法

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

什么是单词边界呢,其实就是字面意思,一个单词有左右两个边界,看下图就明白了
js正则表达式-基础篇_js正则表达式
连续的数字或者字母会被定义为一个单词。如果是一个符号或者标点之类的呢?看下面
js正则表达式-基础篇_js正则表达式_02
符号或者标点会分隔字符串为多个单词。代码演示一下

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


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

单词边界搞清楚了,非单词边界也就容易明白了,那就是不是单词边界的地方都是非单词边界~
直接上图
js正则表达式-基础篇_js正则表达式_03
上代码

'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/glet 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/glet str = 'abc'reg.exec(str)//["a", index: 0, input: "abc", groups: undefined]reg.lastIndex//1reg.exec(str)//["b", index: 1, input: "abc", groups: undefined]reg.lastIndex//2reg.exec(str)//["c", index: 2, input: "abc", groups: undefined]reg.lastIndex//3reg.exec(str)//nullreg.lastIndex//0复制代码

我们再做个测试

let reg = /\w/glet str = 'abc'reg.exec(str)//["a", index: 0, input: "abc", groups: undefined]reg.lastIndex = 0reg.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复制代码

是不是很简单

结尾

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

未完待续~