正则表达式详解
正则表达式是一个描述字符模式的对象。正则表达式直接量定义在包含一对斜杠之间的字符。
var reg = /\d{2,4}/;
字符 匹配
\o NUL字符(\u0000)
字母与数字本身 自身
\t 制表符(\u0009)
\n 换行符(\u000A)
\v 垂直制表符(\u000B)
\f 换页符(\u000C)
\r 回车符(\u000D)
\xnn 由16进制nn指定的拉丁字符
\uxxxx 由16进制nn指定的Unicode编码
\cX 控制字符^X
[……] 方括号里面的任意字符
[^……] 不在方括号内的任意字符
. 除换行符和其他Unicode行终止符之外的任意字符
\w 任何ASCII字符组成的单词,等价于[a-zA-Z0-9]
\W 等价于[^a-zA-Z0-9]
\s 任何Unicode空白符
\S 任何非Unicode空白符
\d 任何ASCII码数字,等价于[0-9]
\D 任何非ASCII码数字,等价于[^0-9]
[\b] 退格直接量(特例)
{n,m} 匹配前一项至少N次,但不能超过m次
{n,} 匹配前一项至少n次或者更多次
{n} 匹配前一项N次
? 匹配前一项0次或者1次,等价于{0,1}
+ 匹配前一项1次或多次,等价于{1,}
* 匹配前一项0次或多次,等价于{0,}
() 把单独的项组合成表达式,也可以一次或多次重复
| 或者,二者选其一,匹配左边或者匹配右边的,一般写在[]或者()里面
^ 取反,或者以什么什么开头
$ 以什么什么结尾
g 匹配全局
i 不区分大小写
m 多行匹配
var reg = /^(\d{2,4}+[g|h])+[^""]$/gim;
上面介绍了很多很简单的字符,但是具体怎么来组装使用呢?是吧,这是一个梗,现在老夫就带大家来好好玩一下这个各个语言都会有的一个神奇的东西。
我们写正则表达式,首先得定义一个regex对象,然后再通过规则来查找。
var reg = /123/;//这里就是使用//,然后在两个斜杠中间添加要匹配的规则,在这个正则表达式用是匹配123这个字符。
那接下来我们就需要配合上面的那些字符来一起好好玩一下。
①我们先简单说明一下 中括号 花括号 大括号 竖杠 问号 加号 星号 的用法
中括号一般在编程语言中是属于表示属性的,然后在这里,中括号表示匹配中括号中任意一个字符 :[123],在这里就是表示匹配123中的任意一个字符,这里如果想要取反,我们就可以使用 [^abc] ,不匹配abc的字符
大括号一般表示一段代码,在这里也是表示一段代码,我们假如想把代码包裹起来,就可以用大括号了,比如 ([123]{1,}),这样就表示一段代码
花括号一般表示代码块,在正则表达式里面,花括号表示要匹配的次数,{1}表示匹配一次,{1,}表示匹配一到多次,{1,9}至少一次,至多9次。但是呢经常这样写会比较繁杂,所以我们通常把{0,1}用?表示,把匹配一到多次用+号表示,把0到多次用*表示。
然后 | 一般表示或者的关系,所以我们一般在大括号里面可以用这个来选择( a | b | c) 这样就表示匹配a或者b或者c
②匹配方案的一些简写规则
1.如果我们要匹配0-9这样的数字,我们可以使用 【0-9】,但是正则为我们提供了一个 \d,这样就表示匹配0-9,那取反的话,就是\D,大写的d
2.如果我们想要匹配26个英文字符加上数字0-9,我们可以使用 【a-zA-Z0-9】,正则也为我们提供了 \w,如果不匹配这些,就使用\W
3.如果想要匹配空白符,我们可以使用 \s ,如果不匹配空白符就用 大写的\S
4.如果想匹配中文字符或者其他国家的一些字符,我们可以使用unicode编码来表示。例如:\u4E00
5.如果想匹配除换行符跟其他unicode终止符之外的符号就可以使用 . 点来表示
6.通过以上部分,基本就可以完成常见的一些匹配功能.还有额外的部分,就可以参照我上面写的一些案例。
现在我们举个例子来说明:
var str = "width : 100px ;";假如我们想把100px转化为r(100px);
1.这里我们先匹配width,那我们应该是匹配字母和0-9,所以是/w,然后多个 \w+
2.width后面可能会有空格,那就应该是 \s 匹配0个多个,就是 \s*
3.空格后面一定要有 : 这个是css的规范,那就要使用先行断言 ?:: 或者 ?=: 可能很多人会很奇怪什么意思,简单来理解就是你前面的空格匹配完成之后后面紧接的一定是什么,或者不一定是什么,你先说清楚,所以我们可以使用?: 来表示后面一定是冒号,或者 ?= 表示后面一定等于什么。 有正向就一定有反向,那反向就是 ?! 表示后面一定没有什么
4.冒号后面又可能有空格,我们就可以引用前面的表达式,叫内部引用,等会会给大家讲到,然后就是匹配100了, 匹配100就是 \d+ 匹配数字1次到多次
5.100后面一定要有px ,所以我们还是要 用 ?=px 来断言一下
6.px后面可能会有空格,空格后面一定以;结尾 \s*;
最后我们拼接一下就是 var reg = /(\w+)(\s*)(?::)\2(\d+(?:px))\2;$/; 其中\2表示内部引用,就是引用第二个括号的内容,有内部引用就有外部引用
我们这里就可以直接 str.replace(reg,"$1:r($3);"); 注,这里的的$3表示 (\d+(?:px)) 因为先行断言只匹配不获取 $3表示引用第几个括号的内容
var str = 'width : 100px ;';// width: r(100px);
var reg = /(\w+)(\s*)(?::)\2(\d+(?:px))\2;$/;
console.log(str.replace(reg,"$1:r($3);"));