js正则表达式-基础篇

学习 基础篇

基本语法

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

什么是单词边界呢，其实就是字面意思，一个单词有左右两个边界，看下图就明白了

连续的数字或者字母会被定义为一个单词。如果是一个符号或者标点之类的呢？看下面

符号或者标点会分隔字符串为多个单词。代码演示一下

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

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

单词边界搞清楚了，非单词边界也就容易明白了，那就是不是单词边界的地方都是非单词边界~
直接上图

上代码

'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复制代码

是不是很简单

结尾

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

未完待续~