学习 基础篇
基本语法
[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"
打印的字符串已验视换行的
基本语法就先说这么多,剩余的基本上用法都没差别。
正则标志位
正则有三个标志位
- ignoreCase,简写为 i
- global,简写为 g
- 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缺一不可
正则相关的一些属性和方法
方法
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
是不是很简单
结尾
这是基础篇,下面准备再写一篇进阶篇
未完待续~