JavaScript 正则教程

做前端的，如果你说专业做前端的，那么它的特点便是使用的技术多种多样，而且跨域性较大：有设计的、用用户体验分析系的，有编码开发的……显得斑驳庞杂。看似那么多的技术，作为前端人员，不能说都精通，但至少需要有所猎及，以便于“突击”，才称得上胜任。而所谓前端的“编码开发”又可以被认为是一个相当广泛的概念，同你所从事的工作过程中，很可能遇到的 css/js/as/sql 多种开发语言……可见作为前端开发人员，的确需要掌握许多技能。而其中的一环，正则表达式（RegExp），就是这么一个相当突出的一门本领，之所以形容为“突出”，在于正则表达式不但十分有用，而且其思路和控制流程与一般我们熟悉的开发语言有着明显差异与区别。至于个中原理可以参考计算机科学中的“自动机理论”，当然，这里并非讨论学术问题就不深入了。总之人们都强调再三，正则价值很大，应该把正则学好。我个人很是同意这点，而且觉得，首先不一定要熟悉概念部分，可以直接上机拿例子实验。通过例子很容易观察正则元字符的含义，再去看概念和定义，就容易理解多了。这里部分，最终我们还是要强调记住正则各个元字符所代表的含义，对每一个 RegExp 一点一滴加以熟练掌握才是。

一、简介

正则全称正则表达式，通常叫正则就可以了，英文叫 Regular Expression，简称 RegExp。至于为什么叫“正则表达式”，是不是有点怪怪的？——既然说是“正”了，哪里又是“反的”，——这里就不学究了，本文是快速教程，学懂再说，不必纠泥学术的名称。总之，正则很有用的，先学会！

二、Hello World

不能免俗，还是要祭出 Hello World。

alert(/hello/.test('hello world')); // 匹配 hello

Hello World 例子中我们首先明白正则的格式是/……/，一对斜杠在一前一后在围绕着正则。我们当前正则就是字符 hello，但注意无须引号”'去表示字符。正则在 js 中是一种特殊的量，允许有其特殊的语法和格式，但也是一种“对象”。既然是对象所以也允许有其方法，比如这里的 /hello/.test():boolean 返回 true/false。true 表示该正则有匹配结果，反之 false 没有。

这里先介绍简单的正则表达方式，下文皆然。不过我们必须知道，这不是唯一正则的表达方式。正则可以动态生成的，容日后再讲。试试几个例子：

alert(/i/.test('Day Day Up')); // 没有匹配
alert(/天/.test('天天向上)); // 肯定有，都两个 天 了

三、不分大小写（Case-insensitive）

中文是没有大小写的，英文却有大小写，地球人都知道这点 -_-!。正则中默认大小写有别，也就是 alert(/i/itest('I Love ME')); 返回 false。如果想取消这一默认，让输入条件大小写一视同仁，写这样就可以了：

alert(/i/i.test('I Love ME')); // 匹配I

看到没有？正则斜杠后面加上 i 便可以了。除i之外还有 g(是否全文)、m(是否多行)的模式供用户选择。这是一个不定项的选择，也就是说既可以 /abc/img，也可以 /abc/mg…… 如此类推，看需要而定。

四、认识正则的“概括能力”

' ' =   =  & # 160; = String.fromCharCode(160); = var c = "\xa0"; = var c = "\240"; = var c= "\u0020 ";

\ddd (三位數，代表八進位ASCII)
\xdd (x加兩位數，代表十六進位ASCII碼)
\udddd (u加四位數，用Unicode碼表示，又叫UCN, Unicode Character Name) 

五、深入

为方便记忆，仍然有一些固定组合，如像 [/s/S]* 的情形，[/d/D]、[/w/W] 等，不一定全记住，但归根结底还是互逆关系，这点一定须牢记。

记住单个元字符后，则要考虑多个元字符组合起来的含义。单个元字符好记，多个元字符组合起来的含义则就是千变万化，而且很多都是细节，例如简单类[] 和 复杂模式的候选 (|) 有时候会有点区别的。参考：http://www.iteye.com/topic/239904#661142

另外提醒，实验过程中，不应满足简单的几个例子。因为随着例子的变化，写出来的正则往往会很不同。所以应该找不同的例子，根据字符的格式，找出规律，写出正则。当然，我们的目标首先是要写出正确的正则，匹配命中。然后再优化。就算同一个匹配，他们的正则往往都很不同的，也就是因人而异的，写出来的差别很大。所以就有这一道的优化功夫。

正好遇到了这么两个函数，当初便是为了优化前端的 CSS，或者格式化 CSS，处理好缩进之类的目的，从网上找到了一段小脚本。但发现其原理离不开正则的运用，任务简单之余感觉较容易传播知识，我于是趁机学习一二，并试着写写注释——还请大家点出不正确的地方。

/** 
 * 压缩CSS样式 
 * 
 * @param {String} code 
 * @return {String} 
 * */
function compress(code) {
    code = code.replace(/\n/ig, ''); // 去掉换行 
    code = code.replace(/(\s){2,}/ig, '$1'); // 多空间（两个以上） 变 一个空格 
    code = code.replace(/\t/ig, ''); // 去掉tab 
    code = code.replace(/\n\}/ig, '\}'); // 换行+} 变 不换行 
    code = code.replace(/\n\{\s*/ig, '\{'); // {+换行 变 不换行 
    code = code.replace(/(\S)\s*\}/ig, '$1\}'); // 去掉 内容 与 } 之间的空格 
    code = code.replace(/(\S)\s*\{/ig, '$1\{'); // 去掉 内容 与 { 之间的空格 
    code = code.replace(/\{\s*(\S)/ig, '\{$1'); // 去掉 { 与 内容之间空格 
    return code;
}

/** 
 * 格式化CSS样式 
 * 
 * @param {String} code 
 * @return {String} 
 * */
function format(code) {
    code = code.replace(/(\s){2,}/ig, '$1'); // 多空间（两个以上） 变 一个空格 
    code = code.replace(/(\S)\s*\{/ig, '$1 {'); // 对 {与{前面的内容 之间进行换行 
    code = code.replace(/\*\/(.[^\}\{]*)}/ig, '\*\/\n$1}'); // 注释后面如果有内容，将后面的内容换行
    code = code.replace(/\/\*/ig, '\n\/\*'); // 开始的注释 换行
    code = code.replace(/;\s*(\S)/ig, ';\n\t$1'); // 对 ;与;后面的内容 之间进行换行 
    code = code.replace(/\}\s*(\S)/ig, '\}\n$1'); // 对 }与}后面的内容 之间进行换行
    code = code.replace(/\n\s*\}/ig, '\n\}'); // }前面如有多个空格，则不要这些空格 
    code = code.replace(/\{\s*(\S)/ig, '\{\n\t$1'); // 对 {与{后面的内容 之间进行换行
    code = code.replace(/(\S)\s*\*\//ig, '$1\*\/'); // 结束的注释 换行 
    code = code.replace(/\*\/\s*([^\}\{]\S)/ig, '\*\/\n\t$1'); // 注释前面如果有内容，将后面的内容换行 
    code = code.replace(/(\S)\}/ig, '$1\n\}'); // 对 }与}前面的内容 之间进行换行
    code = code.replace(/(\n){2,}/ig, '\n'); // 多个换行 变为 单个换行 
    code = code.replace(/:/ig, ': '); // 冒号 : 之间有空格 
    code = code.replace(/ /ig, ' '); // 两个空格 变为 一个空格
    return code;
}

学正则表达式的工具网站，可以直观的看到正则的匹配流程。

http://regexper.com/ 源码：https://github.com/javallone/regexper-static

六、口诀

推荐网上流传的《正则表达式口诀及教程》：
正则其实也势利，削尖头来把钱揣； （指开始符号^和结尾符号$）
特殊符号认不了，弄个倒杠来引路； （指/. /*等特殊符号）
倒杠后面跟小w， 数字字母来表示； （/w跟数字字母;/d跟数字）
倒杠后面跟小d， 只有数字来表示；
倒杠后面跟小a， 报警符号嘀一声；
倒杠后面跟小b， 单词分界或退格；
倒杠后面跟小t， 制表符号很明了；
倒杠后面跟小r， 回车符号知道了；
倒杠后面跟小s， 空格符号很重要；
小写跟罢跟大写，多得实在不得了；
倒杠后面跟大W， 字母数字靠边站；
倒杠后面跟大S， 空白也就靠边站；
倒杠后面跟大D， 数字从此靠边站；
倒框后面跟大B， 不含开头和结尾；

单个字符要重复，三个符号来帮忙； （* + ？）
0 星加1 到无穷，问号只管0 和1； （*表0-n;+表1-n;?表0-1次重复）
花括号里学问多，重复操作能力强； （{n} {n,} {n,m}）
若要重复字符串，园括把它括起来； （（abc）{3} 表示字符串“abc”重复3次 ）
特殊集合自定义，中括号来帮你忙；
转义符号行不通，一个一个来排队；
实在多得排不下，横杠请来帮个忙； （[1-5]）
尖头放进中括号，反义定义威力大； （[^a]指除“a”外的任意字符 ）
1竖作用可不小， 两边正则互替换； （键盘上与“/”是同一个键）
1竖能用很多次， 复杂定义很方便；
园括号，用途多；
反向引用指定组，数字排符对应它； （“/b(/w+)/b/s+/1/b”中的数字“1”引用前面的“(/w+)”）
支持组名自定义，问号加上尖括号； （“(?/w+)”中把“/w+”定义为组，组名为“Word”）
园括号，用途多，位置指定全靠它；
问号等号字符串，定位字符串前面； （“/b/w+(?=ing/b)”定位“ing”前面的字符串）
若要定位串后面，中间插个小于号； （“(?<=/bsub)/w+/b”定位“sub”后面的字符串）
问号加个惊叹号，后面跟串字符串；
PHPer都知道， ！是取反的意思；
后面不跟这一串，统统符合来报到； （“/w*d(?!og)/w*”，“dog”不符合，“do”符合）
问号小于惊叹号，后面跟串字符串；
前面不放这一串，统统符合来报到；
点号星号很贪婪，加个问号不贪婪；
加号问号有保底，至少重复一次多；
两个问号老规矩，0次1次团团转；
花括号后跟个？，贪婪变成不贪婪；
还有很多装不下，等着以后来增加

好像 For PHPer 的……不过也没关系 呵呵。