JavaSript-正则表达式

女爷i 2022-05-26 11:08 93阅读 0赞

RegExp（正则表达式）：匹配特殊的字符或者有特效搭配原则的字符的最佳选择。

[JavaScript RegExp对象][JavaScript RegExp]

俩种创建RegExp对象的方法。

1：直接量语法：

var reg=/abc/;
            var str='abcsdcs';

reg表示我们制定了这样的规则，检查字符串是否连续出现abc。

![70][]

后面可以加上三个属性i g m（下面说）

2：创建RegExp对象

new RegExp(pattern,attributes);

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

var reg=/abc/;
            var str='abcsdcs';
            var reg1=new RegExp("abc");

reg和reg1一样。

还可以利用已有的表达式写：

var reg=/abc/;
            var str='abcsdcs';
            var reg1=new RegExp(reg);
            var reg2=RegExp(reg);

reg和reg1是互相不干扰，reg和reg2公用一个地址，就是一个而已。

![70 1][]应该很清楚了吧。

修饰符（i,g,m)

<table style="margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809.333px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
 <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
 <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);width:139.667px;">修饰符</th> 
 <th style="margin:0px;padding:5px 15px 5px 6px;border-color:rgb(63,63,63);vertical-align:baseline;background-color:rgb(63,63,63);color:rgb(255,255,255);">描述</th> 
 </tr> 
 <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
 <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_regexp_i.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);background-color:rgb(253,252,248);" rel="nofollow">i</a></td> 
 <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">执行对大小写不敏感的匹配。</td> 
 </tr> 
 <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
 <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/jsref_regexp_g.asp" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);background-color:rgb(253,252,248);" rel="nofollow">g</a></td> 
 <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。</td> 
 </tr> 
 <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(255,255,255);"> 
 <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">m</td> 
 <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">执行多行匹配。</td> 
 </tr> 
 </tbody> 
</table>

i:不区分大小写

var reg=/abc/i;
            var str='Abcsdcs';

![70 2][]index表示在那里匹配成功了。

![70 3][]如果把i去掉，那么匹配为null,没有嘛，大小写是不同的。

g:全局匹配

var reg=/aba/g;
            var str='abababa';

![70 4][]我如果仔细看str的时候，发现其实里面不只有俩个。

我们注意这里匹配时，如果匹配成功了，那么就不会回头了，继续匹配，那么就只有首尾的俩个了。

m:多行匹配

var reg=/^a/g;
            var str='abc\na';

reg表示的是a必须是开头，这种情况。

![70 5][]其实我们知道str字符串是俩行的，但是只匹配了一个，因为没有开启多行匹配功能。

var reg=/^a/gm;
            var str='abc\na';

![70 6][]这样就可以了。

方括号：方括号用于查找某个范围内的字符。

比如\[abc\]那么匹配的时候这个地方是a||b||c都可以。

var reg=/[ab]c/g;
            var str='acbc';

![70 7][]ac和bc都可以。

\[^ab\]表示这里不能是ab，其他字符均可。

var reg=/[^ab]c/g;
            var str='acec';

![70 8][]ec就满足条件了。

\[0-9\]：查找任何从 0 至 9 的数字。

\[a-z\]：查找任何从小写 a 到小写 z 的字符。

\[A-Z\]：查找任何从大写 A 到大写 Z 的字符。

\[A-z\]：查找任何从大写 A 到小写 z 的字符。

var reg=/[0-9][A-z]/g;
            var str='a5b6A#';

![70 9][]

(red|blue|green)：查找任何指定的选项。

var reg=/(wust|cyl)/g;
            var str='777wustcyl777';

![70 10][]这个很简单，但是括号的用法不止如此，后面有更神奇的用法。

元字符（Metacharacter）是拥有特殊含义的字符：

\\w查找单词字符。\\W查找非单词字符。

\\w===\[0-9A-z\_\]  \\W就是取补集

var reg=/\w/g;
            var str='7wustcyl7_@';

![70 11][]@不在里面，在\\W里面

\\d     查找数字。\\D查找非数字字符。

\\d=\[0-9\]  \\W取补集

\\s查找空白字符。\\S查找非空白字符。

空白字符可以是：  
空格符 (space character)  
制表符 (tab character)  
回车符 (carriage return character)  
换行符 (new line character)  
垂直换行符 (vertical tab character)

换页符 (form feed character)

\\s=\[\\t\\n\\f\\t\\v \]  \\S取补集

\\b匹配单词边界。\\B匹配非单词边界。

什么是单词边界了？

var str='abc cde sdf';那个这个字符串有6个单词边界，就是每个单词首尾的，但是是空。

var reg=/\b/g;
            var str='abc def srt';

![70 12][]既然是空，那么有什么作用了。

var reg=/\bd/g;
            var str='adc def srt';

![70 13][]只有一个d.

var reg=/\bd/g;
            var str='adcdef srt';

![70 14][]不存在这样的d.

'.'查找单个字符，除了换行和行结束符。

.===\[\\r\\n\]的补集

表示整个字符集合，也就是所有的都可以匹配。

写法很多 比如\[\\s\\S\]这样就可以了。

量词

n+匹配任何包含至少一个 n 的字符串。\{1，\}

n\*匹配任何包含零个或多个 n 的字符串。\{0，\}

var reg=/\w+/g;
            var str='cyl';

![70 15][]如果我们不加+，那么肯定是![70 16][]，+重复的是\\w。

这里\\w+可以看出\\w\\w\\w.

var reg=/\w*/g;
            var str='cyl';

![70 17][]因为出现0次就是空嘛，当光标移到l后面是，还有一个逻辑的距离空。

var reg=/\d*/g;
            var str='cyl';

结果是什么？

![70 18][]c前面 c到y y到l  l后面

那么刚刚为什么c的前面没有匹配空出来了？

这里需要知道它匹配的”贪婪原则“，能匹配多的字符就匹配多的。

没有字符可以匹配了，才匹配空的。

n?匹配任何包含零个或一个 n 的字符串。\{0,1\}

var reg=/\w?/g;
            var str='cyl';

![70 19][]应该很简单了。

n\{X\}匹配包含 X 个 n 的序列的字符串。\{x\}

n\{X,Y\}匹配包含 X 至 Y 个 n 的序列的字符串。\{x,y\}  满足贪婪原则，匹配多的优先

n\{X,\}匹配包含至少 X 个 n 的序列的字符串。\{x, \} 满足贪婪原则，匹配多的优先

var reg=/\w{5}/g;
            var reg1=/\w{3,5}/g;
            var  reg2=/\w{3,}/g;
            var str='aaaaaaaaaaaaa';

![70 20][]13个a的不同匹配，一看就明白了。

n$匹配任何结尾为 n 的字符串。

^n匹配任何开头为 n 的字符串。

var reg=/^abc/g;
            var str='abcabc';

![70 21][]只有第一个满足要求，你可以理解成以a开头后面接上bc

var reg=/abc$/g;
            var str='abcabc';

![70 22][]同理也只有一个。

那么，这样了？

var reg=/^abc$/g;
            var str='abcabc';

![70 23][]匹配不出来，道理也很简单。^abc匹配的是前面的那个abc  abc&匹配的是后面那个abc。abc不一样，所以当然匹配不出来了咯！！！

也就是说var reg=/^abc$/g  只能匹配var str='abc';

![70 24][]

?=n匹配任何其后紧接指定字符串 n 的字符串。

?!n匹配任何其后没有紧接指定字符串 n 的字符串。

var reg=/a(?=b)/;
             var str='abaaaa';

![70 25][]后面的可以看出修饰前面的，结果不包含。

RegExp 对象属性

globalRegExp 对象是否具有标志 g。

ignoreCaseRegExp 对象是否具有标志 i。

lastIndex一个整数，标示开始下一次匹配的字符位置。

multilineRegExp 对象是否具有标志 m。

source正则表达式的源文本。

![70 26][]

重点看lastIndex

等一会讲。

RegExp 对象方法

test检索字符串中指定的值。返回 true 或 false。（作用不大）

exec检索字符串中指定的值。返回找到的值，并确定其位置。

重点exec

var reg=/ab/g;
            var str='abab';

![70 27][]

index是找到的位置，执行第一遍我们在0，再执行一遍，到2了，接着继续匹配了？没有了就是空。然后继续匹配，我们发现它回去了，循环了。好像有一个东西循环的动？这个东西就是lastIndex.

var reg=/ab/g;
            var str='abab';
            console.log(reg.lastIndex);
            console.log(reg.exec(str));
            console.log(reg.lastIndex);
            console.log(reg.exec(str));
            console.log(reg.lastIndex);
            console.log(reg.exec(str));
            console.log(reg.lastIndex);
            console.log(reg.exec(str));

![70 28][]一目了然。

![70 29][]而且lastIndex还可以改变。。。。

（）的高级应用。

问题：假设我们需要匹配形如xxyy的字符串，怎么写正则表达式。

var reg=/(\w)\1(\w)\2/g;
             var str='aabbacac1122';

![70 30][]我们来解释一下，为什么能这么写。

（）里面的式子称为子表达式，而且会把里面的东西保留下来。更厉害的是我可以通过\\num将第num个自表达式反向引用出来。

形如xxxx的怎么写了？ var reg=/(\\w)\\1\\1\\1/g;  ok了。

支持正则表达式的 String 对象的方法

注意这里是String上面的方法。

search检索与正则表达式相匹配的值。

var reg=/(\w)\1(\w)\2/g;
             var str='aabbacac';

![70 31][]返回的是匹配成功的位置，如果没有那么为-1，加g不加g，没区别。

var reg=/(\w)\1(\w)\2/g;
             var str='abbacac';

![70 32][]

match找到一个或多个正则表达式的匹配。

这个也是我们一直用的，就不用说了。

split把字符串分割为字符串数组。

var reg=/(\w)\1/g;
             var str='abbacac';

![70 33][]在bb处分开了，注意还是要把子表达式返回的。

var reg=/\d/g;
             var str='abb0acac';

![70 34][]没有子表达式。

replace替换与正则表达式匹配的子串。重点

先看一个代码：

var str='aaa';
             console.log('a','b');

答案是撒？

var str='aaa';
             console.log(str.replace('a','b'));

![70 35][]它没有访问全局的能力。只能变一个。

等价于下面这个写法。

var reg=/a/;
             var str='aaa';
             console.log(str.replace(reg,'b'));

我们只有给reg加上g才能把所有的a变成b

var reg=/a/g;
             var str='aaa';
             console.log(str.replace(reg,'b'));

![70 36][]

问题描述：我们需要把形如xxyy变成yyxx.

怎么搞？

var reg=/(\w)\1(\w)\2/g;
             var str='aabbcyl1122';
             console.log(str.replace(reg,'$2$2$1$1'));

![70 37][]这样搞撒。这里有个知识点我们可以用$num来引用第num个子表达式。

var reg=/(\w)\1(\w)\2/g;
             var str='aabbcyl1122';
             console.log(str.replace(reg,function($,$1,$2){
                 return $2+$2+$1+$1;
             }));

![70 38][]还可一这样写，第二个参数是一个函数，返回值是字符串就行。

函数的第一个参数是正则表达式的匹配内容，第二个是第一个子表达式，第三个是第二个子表达式，以此类推。

一道好题目：

将字符串'10000000'变成'10.000.000'

var reg=/(?=(\B)(\d{3})+$)/g;
             var str='10000000';

![70 39][]

[JavaScript RegExp]: http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
[70]: /images/20220526/5ff1faed445c45179dd0a145bb7cf13f.png
[70 1]: /images/20220526/2cf44a32dcca40d2a814d671121ec504.png
[70 2]: /images/20220526/ef83988015274416a727f9885d41c746.png
[70 3]: /images/20220526/d945ad34524f459b964fcbb3c1708771.png
[70 4]: /images/20220526/04bc31f874dc4d2f82022475d996eb91.png
[70 5]: /images/20220526/44334f84ad054b7e97dbb9e1504f377a.png
[70 6]: /images/20220526/23bab13dc5394937bc04b20df4f2f6a5.png
[70 7]: /images/20220526/77887a1bd29d458dab2d483d7d78ecc5.png
[70 8]: /images/20220526/91dbd5d90d304221a07416b81831d894.png
[70 9]: /images/20220526/397fe6a94bec4e819d14a27f2d2ccf71.png
[70 10]: /images/20220526/2866e3e9e00142cd85102b2410d9204b.png
[70 11]: /images/20220526/c86be6de62404913a380d1db01260549.png
[70 12]: /images/20220526/94e8e955e2394b2898b8526f4765ddf9.png
[70 13]: /images/20220526/474397afab244af3b51dd01b6b019326.png
[70 14]: /images/20220526/67d757d9f6be44cf9ce866a67ac09a7d.png
[70 15]: https://img-blog.csdn.net/20180430193727680?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 16]: /images/20220526/c26208e7d4454d4bbe27d78ab4a150ff.png
[70 17]: /images/20220526/31b8c5c0529340cb886f4c9a45f6baef.png
[70 18]: /images/20220526/1d386ae2d5194273a29473fbdf0bdfd1.png
[70 19]: /images/20220526/d0c4b5b305654b49ae6abb50721f3b28.png
[70 20]: /images/20220526/23a26883bc7c43099fdf53589bb7b1e5.png
[70 21]: /images/20220526/852320dbd777458e89fc45cf796f3054.png
[70 22]: /images/20220526/1374d0eee97645908320f5c759b95546.png
[70 23]: /images/20220526/096ed5dad5d445b18b1da1717a3c513b.png
[70 24]: /images/20220526/e7e6bf9fb5d544f99daaad6cf917b99a.png
[70 25]: /images/20220526/27c1f7e8224e4325b79eeaa2b7d995bb.png
[70 26]: /images/20220526/389919e339f44676b54dcd27b942bccc.png
[70 27]: /images/20220526/4cf025d298074707a61ff83daa5434a0.png
[70 28]: /images/20220526/b48efd7d43734fd098bb38d6630463c4.png
[70 29]: /images/20220526/6e85e65fbb524e6cb371ecf7b50ff89e.png
[70 30]: /images/20220526/b3bd2cdebe7c4da987ab49068c0fc973.png
[70 31]: /images/20220526/e58004773f3740098cf32e6f2f085130.png
[70 32]: /images/20220526/5579e9dbc6f5471ca516dce64d9b391f.png
[70 33]: /images/20220526/aaa29c3be60f4112bb060d22b839a639.png
[70 34]: /images/20220526/9c87c8c4027e43a4b077a001900f036a.png
[70 35]: /images/20220526/8735b9a0bbf540b0b4cd28c4d364d4f1.png
[70 36]: /images/20220526/2ce356fd39934e59ac9e8b3b4aa143d5.png
[70 37]: /images/20220526/8ae93697007b44ceaa7f77f53bdb94b0.png
[70 38]: /images/20220526/0afbc201832b4c288b672fefbcd8cc10.png
[70 39]: /images/20220526/1b12c813f3634945a905fd1f7028f267.png