题记：“离娄之明，公输子之巧，不以规矩，不能成方圆！”初闻正则表达式，以为一系列之规则，实则还为定义种种规矩！(∩_∩)~正则表达式言之“世间万物皆有我来审判！！！吾乃王道！吾乃标准！”
“铃铃铃”！下面进入正题。
1.图形化工具
首先，我们来聊聊正则表达式的工具吧！此工具非彼工具，那就是将书写的正则表达式文字利用图形化给展示出来！就是一款图形化工具。
图形化工具.PNG
接下来就聊聊怎么把它安装到本地吧！（在安装完nodejs环境后）
1 首先下载压缩包。地址： https://github.com/javallone/regexper-static
2345截图20161226003212.png
2 然后将压缩包给解压后打开文件夹，按住shift点击鼠标右键，打开终端，输入“npm install”，装下环境依赖；等其安装完之后进行第三步。
3 在终端内输入“npm start”，等待其启动完毕。
成功界面.PNG
这样做得好处就是只要在浏览器中输入"127.0.0.1:8080"就可以打开图形化工具了，不会受到网络的影响，速度也很快。
图形化界面.PNG
要想结束这个服务，就在刚才的终端按下ctrl+c。
到底正则表达式是何方神圣呢？用它能做到什么样的功能呢？
例如，我们在sublime中按Ctrl + h 调出替换框。 最让小白惊奇的是：竟然在sublime中也可以使用正则表达式来完成替换工作！！！sublime插件真是相当强大的啊！瞧！下面例子：
将单词is替换成IS
He is a good man.
This is a text.
Where are you?
Display is also a noun.
isn't it ?
What is your name?
通过正则表达式很容易的将 ' is ' 替换成 ' IS '。
GIF.gif
在这里可以看出仅仅是将单词 is 替换成 IS，而不会将this中的is也给替换了。
来来来 ， 客官看这里
去掉首尾有特征字符串
去掉http協議的jpg文件的協議頭
http://defdsf/df.jpg
https://dsfasdf.jpg
http://dsfdsf.jpg
https://dsfadsfsaddsf/dsfdsf.jpg
我们可以通过正则表达式 ^http(://.+).jpg$ 来实现！这段正则表达式表示的是什么意思呢？可以通过图形化工具来看看！
图形化.PNG
表示是以 http 开头，然后分成一个组，组内是 :// 加上任意字符，最后是以 .jpg 结尾的规则。我们就开始替换了！
替换
正式学习正则表达式
No.1 两种方法实例化正则表达式的方式
- 字面量
var reg = /\bis\b/g； var reg = /\bis\b/gim; - 构造函数法
var reg = new RegExp("\bis\b","g")
tip:推荐使用字面量方法，因为看起来简单（easy）
No.2 修饰符
- g: global全文搜索，不添加，搜索到第一个匹配停止
- i: ignore case 忽略大小写，默认大小写敏感
- m: multiple lines 多行搜索
重点来说说这个m多行匹配吧：
如果 multiline 为 false，那么 "^" 匹配字符串的开始位置，而 "$" 匹配字符串的结束位置。
同样如果 multline 为 true，那么 "^" 匹配字符串开始位置以及 "\n" 或 "\r" 之后的位置，而 "$" 匹配字符串结束位置以及 "\n" 或 "\r" 之前的位置。
其实很简单，多行模式就是根据 \r 或 \n 把字符串分隔为多个单行模式去分别匹配，关键是要与 ^ 或 $ 配合使用！
var s = "haha, hello world!\nhaha, ni hao!";
alert(s.replace(/^haha/g, "heihei"));
alert(s.replace(/^haha/gm, "heihei"));
结果：
弹出框1
弹出框2
发现弹出框1中第一个haha被替换了，弹出框2中第一行和第二行中的haha都被替换了，这个也就是m 多行文本替换的功能啦！
No.3 元字符
正则表达式由两种基本字符类型组成
- 原义文本字符：例如字符 a 到 z
- 元字符:在正则表达式中含有特殊含义的非字母字符,如下：
** . * + ? $ ^ | \ () {} [] **
\t 水平制表符
\v 垂直制表符
\n 换行符
\r 回车符
\0 空字符
\f 换页符
\cX 与X对应的控制字符(Ctrl + X)
如果想要把元义字符转换为普通字符，只需在其前面加 ** 即可
No.4 字符类
一般情况下正则表达式中一个字符对应字符串一个字符
这里的 ab\t 对应的就是* "ab"+tab*
我们可以通过使用元字符[]来构建一个简单的类
所谓的类是指符合某些特性的对象，一个泛指，而不是特指某个字符
表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类的字符
No.5 字符类取反
使用元字符^创建 反向类/负向类
反向类的意思是不属于某类的内容
表达式[^abc]表示不是字符a或b或c 的内容
No.6范围类
使用字符类匹配数字
我们可以使用[a-z]来连接两个字符表示从a到z的任意字符
这是个闭区间 包含a和z本身
在[ ]组成的类的内部是可以连写的 [a-zA-Z]
No.7 预定义类
正则表达式提供预定义类来匹配常见的字符类
| 字符 | 等价类 | 含义 |
|---|---|---|
| . | [^\r\n] | 除了回车符和换行符以外的所有字符 |
| \d | [0-9] | 数字字符 |
| \D | [^0-9] | 非数字字符 |
| \w | [a-zA-Z_0-9] | 单词字符(字母、数字、下划线) |
| \W | [^a-zA-Z_0-9] | 非单词字符 |
| \s | [\t\n\x0B\f\r] | 空白符 |
| \S | [^\t\n\x0B\f\r] | 非空白符 |
No.8 边界
| 字符 | 含义 |
|---|---|
| ^ | 以XXX开始 |
| $ | 以XXX结束 |
| \b | 单词边界 |
| \B | 非单词边界 |
No.9 量词
| 字符 | 含义 |
|---|---|
| ? | 出现0次或1次 (最多一次) |
| + | 出现一次或多次 (最少一次) |
| * | 出现零次或多次 (任意次) |
| {n} | 出现n次 |
| {n,m} | 出现n到m次 |
| {n,} | 至少出现n次 |
No.10 贪婪模式 与 非贪婪模式
-
贪婪模式：尽可能多的匹配次数
-
非贪婪模式：让正则表达式尽可能少的匹配，也就是说一旦成功匹配不在继续尝试就是非贪婪模式。
做法很简单，就是在量词后加 ? 即可。
例如：'123465789'.match(/\d{3,5}?/g)
var s = "d123456ddd321236";
var r = s.match(/\d{3,6}/g);
var w = s.match(/\d{3,6}?/g);
console.log(r);
console.log(w);
打印.png
这里就体现出贪婪模式与非贪婪模式的区别了。第一个就是贪婪模式，尽可能的匹配；第二个就是非贪婪模式了，只匹配到3个数字就OK了。（这名字取得也是非常符合其原意啊！）
No.11 分组
使用( )可以达到分组的功能，使量词作用于分组。
如果我们想连续替换某段字符串3次的话，例如替换ABoyonBoyonBoyonA中的Boyon的话，我们是否可以这样做呢？
var s = "ABoyonBoyonBoyonA";
var r = s.match(/Boyon{3}/g);
console.log(r);
结果是不行的！！！
未使用分组
因为这段正则表达式的含义是匹配 Boyonnn 这个字符串，结果在s中未找到，所以打印的结果为 null;
要想达到效果的话，我们应该这么写：
var s = "ABoyonBoyonBoyonA";
var r = s.match(/(Boyon){3}/g);
console.log(r);
使用分组后
这里将 Boyon 当作一个整体来替换了，所以就OK啦
No.12
-
使用 | 可以达到 或 的效果
Byron | Casper -
反向引用
'2016-12-12'.replace(/(\d{4})-(\d{2})-(\d{2})/g,"$2-$3-$1") -
忽略分组
不希望捕获某些分组，只需要在分组内加上 ?: 就可以了
(?:Byron)
</br>
No.13 敬请期待！！！
</br>
关于正则总结
由于本人小白一枚，在刚开始学完正则后感觉还是every good，但是在写表单验证的时候，一脸懵逼。。。不知所措！于是打算好好整理一下学过的正则表达式的内容，通过查看上课的笔记和网上的视频学习后，感觉任督二脉瞬间被打通，神清气爽，自信的感觉又回来了！
- 巩固之前学习的内容
- 尽绵薄之力，请多指教！
“我一定会回来的，，，啊啊啊啊” —— 摘自灰太狼经典语录
网友评论