🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、正则表达式的基本语法     1、概念:正则表达式由普通字符和特殊字符(元字符)组成的文本模式,该模式描述在查找字符串主体时待匹配的一个或者多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。          普通字符包括所有的大小写字母字符、所有数字、所有标点符号及一些特殊符号。普通字符本身可以组成一个正则表达式,也可以和元字符组合组成一个正则表达式;而元字符则具有特殊的含义,包括()、[]、{}、/、^、$、*、+、?、.、|、-、?:、?=、?!    2、基本语法 ![](https://box.kancloud.cn/2016-08-30_57c54ec65c2e4.jpg)     3、优先权含义 ![](https://box.kancloud.cn/2016-08-30_57c54ec67a4cb.jpg) ## 二、使用RegExp处理字符串正则匹配    1、创建一个RegExp对象:一是使用正则字符串创建(两个斜杠包围)创建一个RegExp对象:var re = /pattern/[flags];  二是用Javascript内建类RegExp类创建RegExp对象:var re = new RegExp("pattern"[,flags]);    2、参数详解:        2.1    pattern:是要使用的正则表达式模式        2.2    flags:可选参数,用于修饰正则表达式,取值如下: ![](https://box.kancloud.cn/2016-08-30_57c54ec68bf9f.jpg) ~~~ <pre name="code" class="javascript">function matchDemo() { var str = "abcdefgh"; var re = new RegExp("abc","g"); //全局匹配abc var result = re.exec(str); alert(result); } matchDemo(); ~~~ ![](https://box.kancloud.cn/2016-08-30_57c54ec69d847.jpg)    3、方法和属性           3.1  exec():检索字符串中的正则表达式的匹配,返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。 ~~~ function matchDemo() { var str = "abcdefgh"; var re = new RegExp("def","g"); //全局匹配def var result = re.exec(str); alert(result); } matchDemo(); ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec6b25d2.jpg) exec()方法返回的数组有input和index属性,input包含了整个被查找的字符串,index属性包含了匹配的子串的位置。result.index返回3,result.input则返回abcdefgh。 对于pattern本身也有lastIndex和source两个属性,前者包含匹配最后一个字符的位置,后者包含pattern本身,可以利用该属性修改匹配模式。   3.2   test():检测一个字符串是否匹配某个模式,如果匹配则返回true,反之返回FALSE。如利用上例,re.test(str)返回TRUE,但是/ABC/.test(str)返回FALSE。 ## 四、正则表达式的捕获语法和变量替换    1、捕获语法:          1.1  (pattern):匹配pattern并捕获该匹配的子表达式,可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(98|95|NT)/; var str = "windows95"; //匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); //windows9598与windows95匹配结果一样 document.write("<br/>$0:"+RegExp.$1); ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec6c7405.jpg)          1.2    (?:pattern):匹配pattern但不捕获pattern,不可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(?:98|95|NT)/; var str = "windows98"; //匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); //windows9598与windows95匹配结果一样 document.write("<br/>$0:"+RegExp.$1); ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec6dadc0.jpg)          1.3    (?=pattern)正向预查,在任何匹配pattern的字符串开始处匹配查找字符串,不可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(?=98|95|NT)/; var str = "windowsNT"; //匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); //windows9598与windows95匹配结果一样 document.write("<br/>$0:"+RegExp.$1); ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec6ee91b.jpg)          1.4   (?!pattern):执行反向预查,先执行搜索子表达式,实现与1.3相反的功能,不可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(?!98|95|NT)/; var str = "windows67"; //不匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); document.write("<br/>$0:"+RegExp.$1); ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec715a76.jpg)    2、使用$替换变量            字 符                          含义                    $$                               $             $&                               指定与整个模式匹配的字符串             $`                                指定与$&描述的匹配之前的字符串部分             $'                                 指定与$&描述的匹配之后的字符串部分             $n                                捕获的第n个匹配,n为1-9             $nn                              捕获的第nn个匹配,nn为01--99 ~~~ var oString = "flip-flop"; var re = /(\w+)-(\w+)/g; //$1表示第一个\w+,$2是第二个,第一个匹配flip,第二个匹配flop oString = oString.replace(re,"$1-$2"); document.write(oString+"<br/>"); //输出flip-flop function matchDemo() { var s; var re = new RegExp("d(b+)(d)","ig"); var str = "cdbBdbsbdbdz"; var arr = re.exec(str); s = "$1 contains: " + RegExp.$1 + "<br/>"; s += "$2 contains: " + RegExp.$2 + "<br/>"; s += "$3 contains: " + RegExp.$3; document.write(s); } matchDemo(); ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec727a3a.jpg) ## 五、使用string类处理字符串      使用new或者用文字字面字符串,可以调用String类的所有成员方法。对于字符串文字,JS解释引擎会自动将其转为临时的String对象,然后调用方法,最后清楚临时对象。不要混淆字符串文字和String实例。String对象有反常的行为。 ~~~ var s1 = "2+2"; //字符串文字 var s2 = new String("2+2"); //String实例 alert(eval(s1)+"\n"+eval(s2)); //alert(s1+"\n"+s2)的返回结果一样:2+2 ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec73989c.jpg)      1、String类的方法和属性 ![](https://box.kancloud.cn/2016-08-30_57c54ec74d32b.jpg)      2、在方法中使用正则表达式               2.1   match(searchvalue,regexp):在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。searchvalue规定要检索的字符串值,regexp,非必须,规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。 ~~~ <span style="font-size:18px;"><script type="text/javascript"> var str="Hello world!" document.write(str.match("world") + "<br />") //world document.write(str.match("World") + "<br />") //null document.write(str.match("worlld") + "<br />") //null document.write(str.match("world!")) //world! </script></span> ~~~ ~~~ <span style="font-size:18px;">var str="1 plus 2 equal 3" document.write(str.match(/\d+/g)) //不使用全局标志g,则只返回一个匹配,输出1</span> ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec764e97.jpg)              2.2    replace(*regexp/substr*,*replacement*)在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,返回一个新的字符串。 regexp/substr规定子字符串或要替换的模式的 RegExp 对象,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。 *replacement*一个字符串值。规定了替换文本或生成替换文本的函数. ~~~ <span style="font-size:18px;">var str="Visit Microsoft!" document.write(str.replace(/Microsoft/, "W3School"))</span> ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec777cee.jpg)            2.3   search(regexp) 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。regexp该参数可以是需要在 stringObject 中检索的子串,也可以是需要检索的 RegExp 对象。要执行忽略大小写的检索,请追加标志 i。返回第一个与 regexp 相匹配的子串的起始位置,若没有匹配,返回-1 ~~~ <span style="font-size:18px;">var str="Visit W3School!" document.write(str.search(/w3school/)) </span> ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec78a40f.jpg)           2.4     split(*separator*,*howmany*) 方法用于把一个字符串分割成字符串数组并返回。*separator*参数必须,字符串或正则表达式,用于指定分隔符;*howmany*可选,该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。 ~~~ <span style="font-size:18px;">var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("") + "<br />") document.write(str.split(" ",3))</span> ~~~ 结果: ![](https://box.kancloud.cn/2016-08-30_57c54ec79d9e5.jpg) |   |   | |-----|-----|