来源于Perl的正则表达式是一门简单语言的语法规范.zip

# javascript正则表达式^谢忠阳 ### 前言 正则表达式一直是困扰很多程序员的一门技术。前端面试过程中多少会被问到一些简单的正则表达式，但大部分应试者都会说：正则不是很了解，遇到问题都会直接搜索复制粘贴。我觉得作为程序开发者，有必要好好了解一下正则，因为很多问题都可以通过一条简单的正则表达式解决，避免写大量脚本去实现。希望这次分享能帮助大家掌握基础的正则，揭开正则表达式各种符号的神秘面纱，从此走上正则大神之路！ ### 什么是正则表达式 来源于Perl的正则表达式是一门简单语言的语法规范，主要应用于字符串的信息实现查找、替换和提取的`技巧`操作。 这里强调是技巧操作，其处理字符串的速度是相当慢的，远不如indexOf、lastIndexOf、includes的速度快，所以勿滥用！但又必须学会，有些需求还非正则解决不了呢。 > 正则表达式的核心是：要么匹配`字符`，要么匹配`位置`！<br/> > 正则：匹配`字符`，匹配`位置`！<br/> > 正则：`字符` `位置`！ ### 常见正则问题： - 将123456789转化为`123,456,789` - 验证密码必须8位以上，以字母开头，必须含有数字、大小写字母 - 剔除字符串中所有html的标签 ## 正则表达式基础 ### 原子（字符） 原子是正则表达式的最基本组成单位，而且必须至少要包含一个原子。 | 正则 　| 意思 | 说明 | | ------------ |:-------------| -----| |. |匹配除换行符以外的任意字符|加/s表示所有字符| |\d |匹配一个数字字符|等价于 \[0-9]| |\D |匹配一个非数字字符|等价于 \[^0-9]| |\w |匹配包括下划线的任何单词字符|等价于\[A-Za-z0-9_]| |\W |匹配任何非单词字符|等价于\[^A-Za-z0-9_]| |\s |匹配任何空白字符，包括空格、制表符、换页符等等|等价于\[\f\n\r\t\v\u000B\u0020\u00A0\u2028\u2029]| |\S |匹配任何非空白字符|等价于 \[^ \f\n\r\t\v]| |\n |匹配一个换行符|等价于 \x0a 和 \cJ| |\f |匹配一个换页符|等价于 \x0c 和 \cL| |\r |匹配一个回车符|等价于 \x0d 和 \cM| |\t |匹配一个制表符|等价于 \x09 和 \cI| |\v |匹配一个垂直制表符|等价于 \x0b 和 \cK| |\xxx |匹配八进制规定的ASCII编码字符|比如\[0-9]可写成\[\48-\57]| |\xdd |匹配十六进制规定的ASCII编码字符|比如\[0-9]可写成\[\x30-\x39]| |\uxxxx |匹配十六进制规定的Unicode字符|比如\[0-9]可写成\[\u0030-\u0039]| |[A-Za-z]|匹配所有大小写字母| 等价于 /\[a-z]/i | |[^a-z]|匹配非字母|匹配指定范围以外的字符| |[a-f1-5]|自定义原子表又称`范围集合类`| | #### 范围集合类 [abc]，表示a或者b或者c中的任意一个字符； [a-z]、[A-Z]、[0-9]，表示小写字母，大写字母，0到9的数字； [^a-z]、[^A-Z]、[^0-9]，表示非小写字母，非大写字母，非0到9的数字； 更多参见基本多语言面（Basic Multilingual Plane,BMP）详细信息[基本多文种平面](http://baike.baidu.com/view/628163.htm) #### 分枝条件 `分枝条件`指的是有几种规则，如果满足其中任意一种规则都应该当成匹配，方法是用|把不同的规则分隔开。 ```js "aababxb".replace(/a|b/g,'') ``` ### 元字符 元字符是一种特殊的字符，是用来修饰原子用的，不可以单独出现； #### 量词类 | 正则 | 说明| |------------|-----| |{m} |表示前面的原子必须出现m次| |{m,}|表示前面的原子最少出现m次| |{m,n}|m要小于n,表示前面出现的原子，最少m次，最多n次，包括m和n次| |? |等价{0,1}表示其前面的原子可以出现0次或1次，有只能有一次，要么没有| |+ |等价{1,}表示其前的原子可以出现1次或多次，不能没有最少要有一个| |* |等价{0,}表示其前的原子可以出现0次、1次、或多次| ##### 贪婪和非贪婪(懒惰)匹配 当正则表达式中包含能接受重复的限定符时，通常的行为是匹配尽可能多的字符。 ```js "aababxb".match(/a.*b/);//贪婪匹配 返回aababxb "aababxb".match(/a.*?b/);//懒惰匹配 返回aab ``` 它将会匹配整个字符串。这被称为贪婪匹配。 | 代码/语法| 说明 | | ---------|-----------| |{n,}? |重复n次以上，但尽可能少重复| |{n,m}? |重复n到m次，但尽可能少重复| | ?? |重复0次或1次，但尽可能少重复| | +? |重复1次或更多次，但尽可能少重复| | *? |重复任意次，但尽可能少重复| #### 边界类（位置） 位置可以理解为相邻字符之间的位置。咱们可以和空字符串进行类比, 字符的首尾、间隙都可以用空字符串进行连接。 ```js 'hello' === '' + 'h' + '' + 'e' + '' + 'l' + '' + 'l' + '' + 'o' + '' ```  | 符号 | 说明| |------------|-----| |^ |脱字符，有m时是行的开头，无m是字符串的开始| |$ |美元符，有m时是行的末尾，无m是字符串的结束| |\b |单词的边界，具体讲有三点规则：①\w和\W之间的位置 ②^与\w之间的位置 ③\w与$之间的位置| |\B |非单词的边界，与上面相反：①\w与\w之间的位置 ②\W与\W之间的位置 ③^与\W之间的位置 ④\W与$之间的位置| ```js var regex = '666root_cloud.com'.replace(/\b/g,'❤') ```  ```js var regex = '[[666root_cloud.com]]'.replace(/\B/g,'❤') ```  ## 正则表达式应用 ### 创建正则表达式 ```js var reg = /xzy/i; //推荐 var reg = new RegExp('xzy', 'i'); //用于动态变量创建 var reg = new RegExp(/xzy/i); var reg = new RegExp(/xzy/i, 'i');//ES5不允许；ES6可以并且第二个参数指定的修饰符会覆盖前面的修饰符 var reg = eval("/xzy/i");//不建议 var reg = new Function("return /xzy/i")();//不建议 console.dir(reg) ``` ### RegExp实例属性 | 属性 | flags | 说明 | | -----------|------|-------| | lastIndex | | 下一次匹配开始的索引，初始值为0。可读写整型属性| | dotAll　　 |/s| 允许`.`匹配换行符, ES7| | flags 　　| | 返回正则表达式的修饰符, ES6| | global |/g| 全局搜索。匹配字符串中所有可能的字符，而不是仅匹配符合条件的第一项| | hasIndices|/d| 为匹配子串生成开头和结尾的索引，索引通过 RegExpArray 的 indices 数组获得| | ignoreCase|/i| 匹配文本的时候忽略大小写来进行搜索| | multiline |/m| 多行搜索，这意味着在包含多个行的字符串中使用^和$符号时，会匹配每行的开头和结尾，而不是默认的只匹配整个字符串的开头和结尾| | source 　　| | 正则表达式源码文本| | sticky 　　|/y| 粘性搜索（ES6）。每次从lastIndex所标识的起始位置开始匹配，如果匹配失败将更新lastIndex为0；如果匹配成功将更新lastIndex为相应值，下次继续从lastIndex匹配。这里的“粘性”想表达的是只有当匹配项是连续的、相“粘连”的，搜索才会从当前下标位置继续下去，否则lastIndex归0从头开始。当 y 和 g 标志被同时使用时会省略 g 标志| | unicode　　|/u| 开启Unicode功能。ES6| - lastIndex ```js var reg = /\d+/g var str = '123abc' console.log(reg.test(str)) // true console.log(reg.lastIndex) console.log(reg.test(str)) // false ``` - dotAll ```js console.log(`abc 123`.match(/.+/s)) ``` - global ```js console.log(`1a2b3c`.replace(/\d+/g,'*')) ``` - flags ```js var reg = new RegExp('a', 'sgdimyu') console.log(reg.flags);//dgimsuy ES6规范中规定了表达式的标识按照字符顺序输出，即dgimsuy ``` - hasIndices ```js var str = 'foo bar foo' var reg = new RegExp('foo', 'gd') console.log(reg.hasIndices) // true console.log(reg.exec(str).indices[0]) // Array [0, 3] console.log(reg.exec(str).indices[0]) // Array [8, 11] `