正则之基本入门

以前看了许许多多的正则教程，收货并不多，往往都是蜻蜓点水，一点就过。事实上，正则用处真的超级大，比如匹配innerHTML的内容，以及表单验证，也是非他莫属。这里，我结合js，对正则进行一个简单的介绍吧。 如有纰漏欢迎指出，希望大家多多包涵。

js与正则的关系

在js中定义一个正则有两种方法，一个是实例化，一个是字面量。分别看一下:

//实例化  var re = /\w+/;   //这两者等价  //字面量  var re = new RegExp('\\w+');

如果想添加一些flags也是没有问题的。比较常用的flag有。/i,/g,/ig,/m.

/i (忽略大小写,ignore)  /g (全文查找出现的所有匹配字符,global)  /m (多行查找,multiLine)  /ig(全文查找、忽略大小写,ignore+global)

所以, 使用flag之后可以这样写.

var reg = ^\d{5,12}\i$  ;//表示忽略大小写,匹配;  //或者  var reg = new RegExp(^\d{5,12}\i$);

正式入门正则

正则其实就是用来匹配字符串的。他用一个简洁表达了，完成了你需要写很多代码的事，就和md(markdown)语法是一个道理。 用的人多了，自然成标准，这也是规则吧。

正则预定字符

预定字符，就是用程序比较难表达的一些字符，比如回车键，tab键(通过空格来区分达到的效果).常用的有:

字符	效果
\t	制表符,其实就是一个“Tab”键
\r	回车符,如果你使用过word应该之后，在一个段落后面那个东西吧。 :)
\n	换行符，他和\r是有故事的,等下说，我们继续

恩，大部分就是这几个了。 上面提到 \r和\n，他们到底有什么却别。 没错，看字面量，感觉return 不就是换行吗？ 其实，这样说没错，但是得区分系统，在Unix为扩展的系统，在每行的结尾只有"\n",而在window下则是:"\n\r"(顺序不能换). 所以，为了解决系统的差异，就出现了两种: \r || \n.所以一般，我们匹配换行需要使用.\r||\n一起使用.

var reg = /[\r\n]/g;

这样就能保证系统的兼容性.

字符类

所谓的字符类同样也是将你平常要花很多时间做出来的，集成为一个简洁表达。(相当于写库)。常用的字符类有如下几个。

字符	效果
.	匹配换行符以外的任意字符
\d	匹配所有数字
\D	匹配非数字
\s	匹配一个空格符
\S	匹配非空格
\w	匹配字母数字下划线=>其实就是匹配单词word(简单易懂)
\W	匹配!字母数字下划线=>就是不匹配单词

来我们看几个例子

console.log(/\s+/.test("     "));  //true  console.log(/\d+/.test("1234231"));  //true  console.log(/\D+/.test("  "));  //true

其他的如上。

锚字符

这个应该算是正则里面，取名最好理解的一个。使用正则就是停船一样，你需要设置你停的位置，我也需要设置我的边界。常用的有一下几个:

锚字符	效果
^	匹配字符串的开头，在多行检索中，匹配一行的开头
$	匹配字符串的结尾，在多行检索中，匹配一行的结尾
\b	匹配一个单词的边界
\B	匹配非单词边界

这几个应该算是我平常用的最多的几个吧。如果你想匹配整个字符串，就可以组合使用"^ $";

var reg = /^\d+$/;  //匹配整个字符串为数字

量词字符

"望文生义",这类字符使用来限定某某出现的次数的。常用的有:

代码 / 语法	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n, m}	重复n到m次

这个应该不用多说了。 直接看例子吧

console.log(/^\d+$/.test("123")); //true

上面说了这么多内置的字符，那我想使用特定字符类怎么办嘞。其实也很简单。使用"\"转义字符。比如我想匹配大括号."{}".我可以这样用:

console.log(/\{.+\}/.test("{123}")); //true

console.log(/.+/.test("abcd"));  //true

console.log(/\d+?/.test("1fjkdf"));  //true

var str = "blablablabla";  console.log(str.match(/(b.*a)/g));  //["blablablabla"]

我们最少重复匹配(惰性匹配)

console.log(str.match(/(b.*?a)/g));  //["bla", "bla", "bla", "bla"]

正则: /\d*+/;

其实上面只要留个印象就可以，只有当你真正使用的时候，你才会有感触。OK!!!基本内容说完了，现在轮到真正的进阶，big boom~

中括号的用法

var reg = /[abc]/;  console.log(reg.test("a"));  //true

console.log(/[^abc]/.test("c"));  //false

\d => [0-9]  \w => [0-9a-zA-Z_]  \S => [^\t\n\x0B\f\r]  (\f标识分页符)  ...

另外这个范围字符还有一个好处,就是匹配中文。(电脑都是外国人发明的呀。)

console.log(/[\u4e00-\u9fa5]{1}/.test("艹")); //true

这就是中括号的常用用法。

小括号使用

console.log(/(jimmy)+/.test("jimmy"));  //true

而且，配合使用match方法，可以获得匹配到的内容.

var name = "My name is Jimmy";  console.log(name.match(/(Jimmy)/g));  //["Jimmy"]

需要注意在括号里面写正则和没有括号的时候，是没有区别的。我们可以在()内嵌套你想加的。(如果你想嵌套()的话，Sorry，这样并没有什么卵用).

var name = "My name is Jimmy Jimy";  console.log(name.match(/(Jimm?y)/g));  //["Jimmy", "Jimy"]

var name = "My name is Jimmy sam";  var reg = /(jimmy|sam)+?/ig;  console.log(name.match(reg)); //["jimmy","sam"]

var reg = /(100)\1/;  var reg2 = /(100)(99)(101)\1\2\3/; //1=>100,2=>99,3=>101

在js中，通常是和replace搭配，才有威力。

var reg = /(100) (99)/;  var str = "100 99";  console.log(str.replace(reg,"$2 $1")); //99 100

非捕获分组

var str=` <div class="pin">              <div class="box">                  <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />              </div>          </div>`;  var reg = /<div(?:.|\r|\n)*div>/gi;  console.log(str.match(reg));

<div class="pin">              <div class="box">                  <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />              </div>          </div>

<div class="pin">              <div class="box">                  <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />              </div>

可以看出少了一个< /div>,原因就是，惰性匹配尽量只会匹配到第一个重复的< /div>上面的。所以，总结一下，在使用正则匹配的时候需要搞清楚到底什么时候用惰性，什么时候用贪婪，这点很重要。 贪婪会匹配最外层，惰性会匹配最里层。

前瞻(零宽断言)

前瞻分为正向前瞻和反向前瞻。(由于js只支持前瞻，所以后瞻只会提一下)。 他的作用就是，在匹配的字符后面，断言说后面一定符合我的正则。 (好饶~~)算了，先说一下基本格式吧。

正则	名称	作用
(?=exp)	正向前瞻	匹配exp前面的位置
(?!exp)	反向前瞻	匹配后面不是exp的位置
(?<=exp)	正向后瞻	匹配exp后面的位置
(?< !exp)	反向后瞻	匹配后面不是exp的位置

看不懂了吧，我们来看一下详细的内容。for instances:

var str = "happied boring";  var reg1 = /happ(?=ied)/g;  var reg2 = /bor(?!ied)/;  console.log(str.match(reg1)); //["happ"]  console.log(str.match(reg2)); //["bor"]

var str=` <div class="pin">              <div class="box">                  <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />              </div>          </div>`;  var reg = /<(?!img)(?:.|\r|\n)*?>/gi;  console.log(str.replace(reg,""));  //得到的结果为:  <img src="https://simg.open-open.com/show/d104cb79b036edf9ccaadc1d8de1766d.jpg" />

var str = "he is an interested person";  var reg = /\b\w+(?=ed\b)/ig;  console.log(str.match(reg)); //["interest"]

结束语

关于正则的内容大概就是这些了。 其实正则的学习，不是只用看就能学会的，实践才是硬道理。 通过，理论的学习，在加上踩过的坑，自然会对正则有着莫名的好感。 不过，大神就是大神，取名字就是这么别扭。 什么 零宽断言，前瞻，后瞻，反向引用 blablabla... 在理解的同时可以根据自己的理解给这些名词冠上自己的idea.我这里只是 正则的冰山一角，正则在任意一门语言内，用处都是超级大的。这里安利一个 总结的比较好的正则库。 正则库 . 还有一个在线的regExp测试工具. Debuggex

</div>