JavaScript正则表达式

深藏阁楼爱情的钟 2022-01-22 05:57 386阅读 0赞

**1.简介**

regexper-static：[https://github.com/javallone/regexper-static][https_github.com_javallone_regexper-static]

regexper-static安装：[https://www.imooc.com/qadetail/214086][https_www.imooc.com_qadetail_214086]

正则表达式30分钟入门教程：[http://deerchao.net/tutorials/regex/regex.htm][http_deerchao.net_tutorials_regex_regex.htm]

在线正则表达式测试：  
[http://tool.oschina.net/regex/][http_tool.oschina.net_regex]  
[https://regexr.com/][https_regexr.com]  
[http://jsbin.com/?html,output][http_jsbin.com_html_output]

示例：

//查找当前目录下txt文件
    find ./ -name *.txt

**2.正则表达式基础学习**

参考文章：  
[https://www.runoob.com/js/js-regexp.html][https_www.runoob.com_js_js-regexp.html]  
[https://www.runoob.com/jsref/jsref-obj-regexp.html][https_www.runoob.com_jsref_jsref-obj-regexp.html]  
[https://www.cnblogs.com/mq0036/p/4836439.html][https_www.cnblogs.com_mq0036_p_4836439.html]

1.创建正则表达式

//RegExp是一个对象,和Aarray一样  
    var re = new RegExp(); //但这样没有任何效果,需要将正则表达式的内容作为字符串传递进去 
     
    re =new RegExp("a"); //最简单的正则表达式,将匹配字母a  
    re=new RegExp("a","i"); //第二个参数,表示匹配时不分大小写

RegExp构造函数第一个参数为正则表达式的文本内容，而第二个参数则为可选项标志，标志可以组合使用：  
•g （全文查找）  
•i （忽略大小写）  
•m （多行查找）

var re = new RegExp("a","gi");//匹配所有的a或A

正则表达式还有另一种正则表达式字面量的声明方式 ：

var re = /a/gi;

2.修饰符

修饰符用于执行区分大小写和全局匹配:

1.  i 执行对大小写不敏感的匹配。
2.  g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
3.  m 执行多行匹配。

3.方括号

方括号用于查找某个范围内的字符：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

4.元字符

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

.   查找单个字符，除了换行和行结束符。
    
    \w   查找单词字符。(word)
    \W   查找非单词字符。
    
    \d   查找数字。(digit)
    \D   查找非数字字符。
    
    \s   查找空白字符。(string)
    \S   查找非空白字符。

空白字符可以是：  
1.空格符 (space character)  
2.制表符 (tab character)  
3.回车符 (carriage return character)  
4.换行符 (new line character)  
5.垂直换行符 (vertical tab character)  
6.换页符 (form feed character)

示例：

var str="That's hot!";
    var patt1=/h.t/g;
    str.match(patt1); //hat,hot
    
    var str="Give 100%!"; 
    var patt1=/\w/g;
    str.match(patt1);  //G,i,v,e,1,0,0
    
    var str="Give 100%!"; 
    var patt1=/\W/g;
    str.match(patt1);   // ,%,!
    
    var str="Give 100%!"; 
    var patt1=/\d/g;
    str.match(patt1);   //1,0,0
    
    var str="Give 100%!"; 
    var patt1=/\D/g;
    str.match(patt1);   //G,i,v,e, ,%,!

\\s示例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
\\S示例：

var str="Is this all there is?"; 
    var patt1=/\S/g;
    str.match(patt1);   //I,s,t,h,i,s,a,l,l,t,h,e,r,e,i,s,?

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

\b   匹配单词边界。（boundary）\b 元字符通常用于查找位于单词的开头或结尾的匹配。
    \B   匹配非单词边界。

示例：

var str="Visit Runooob"; 
    var patt1=/\bRun/g;
    str.match(patt1);   //Run
    
    var str="Visit Runoob"; 
    var patt1=/\Bnoob/g;
    str.match(patt1);   //noob

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

\0   查找 NULL 字符。
    
    \n   查找换行符。
    \f   查找换页符。
    \r   查找回车符。
    \t   查找制表符。
    \v   查找垂直制表符。

示例：

//search返回指定查找的字符串或者正则表达式相匹配的 String 对象起始位置。
    var str="Visit RUNOOB.\n Learn JavaScript."; 
    var patt1=/\n/g;
    str.search(patt1);   //13

\xxx   查找以八进制数 xxx 规定的字符。
    \xdd   查找以十六进制数 dd 规定的字符。
    \uxxx   查找以十六进制数 xxxx 规定的 Unicode 字符。

示例：

var str="Visit Runoob. Hello World!"; 
    var patt1=/\127/g;
    str.match(patt1);   //W

5.量词

?   0个或1个 0|1
    *   0个或多个 >=0
    +   1个或多个 >=1

{X}   匹配X个
    {X,}   匹配>=X个
    {X,Y}  匹配Y>= >=X个

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

示例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

**3.RegExp对象方法**

exec()   	检索字符串中指定的值。返回找到的值，并确定其位置。
    test()   检索字符串中指定的值。返回 true 或 false。
    toString()   返回正则表达式的字符串。

示例：

exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，否则返回 null。

var str="Hello world!";
    //查找"Hello"
    var patt=/Hello/g;
    var result=patt.exec(str);
    "返回值: " +  result;   //返回值: Hello
    
    //查找 "RUNOOB"
    patt=/RUNOOB/g;
    result=patt.exec(str);
    "<br>返回值: " +  result;   //返回值: null

test() 方法用于检测一个字符串是否匹配某个模式。如果字符串中有匹配的值返回 true ，否则返回 false。

var str="Hello world!";
    //查找"Hello"
    var patt=/Hello/g;
    var result=patt.test(str);
    "返回值: " +  result;   //返回值: true
    
    //查找 "Runoob"
    patt=/Runoob/g;
    result=patt.test(str);
    "<br>返回值: " +  result;   //返回值: false

toString() 方法返回正则表达式的字符串值。

var patt = new RegExp("RUNOOB", "g");
    var res = patt.toString();
    res;   ///RUNOOB/g

**4.正则表达式的String对象的方法**

search	检索与正则表达式相匹配的值。
    match	找到一个或多个正则表达式的匹配。
    replace	替换与正则表达式匹配的子串。
    split	把字符串分割为字符串数组。

示例：

search()指定查找的字符串或者正则表达式相匹配的 String 对象起始位置。

var str="Mr. Blue has a blue house"
    var n=str.search("blue");   //15

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

var str = "The rain in SPAIN stays mainly in the plain"; 
    var n=str.match(/ain/gi);   //ain,AIN,ain,ain

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str="Mr Blue has a blue house and a blue car";
    var n=str.replace(/blue/g,"red");
    //输出结果
    Mr Blue has a red house and a red car

split() 方法用于把一个字符串分割成字符串数组。

var str="How are you doing today?";
    str.split("")
    (24) ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]

**5.RegExp对象属性**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]

还可以查看资料：[https://www.imooc.com/video/12539][https_www.imooc.com_video_12539]

[https_github.com_javallone_regexper-static]: https://github.com/javallone/regexper-static
[https_www.imooc.com_qadetail_214086]: https://www.imooc.com/qadetail/214086
[http_deerchao.net_tutorials_regex_regex.htm]: http://deerchao.net/tutorials/regex/regex.htm
[http_tool.oschina.net_regex]: http://tool.oschina.net/regex/
[https_regexr.com]: https://regexr.com/
[http_jsbin.com_html_output]: http://jsbin.com/?html,output
[https_www.runoob.com_js_js-regexp.html]: https://www.runoob.com/js/js-regexp.html
[https_www.runoob.com_jsref_jsref-obj-regexp.html]: https://www.runoob.com/jsref/jsref-obj-regexp.html
[https_www.cnblogs.com_mq0036_p_4836439.html]: https://www.cnblogs.com/mq0036/p/4836439.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220122/235d4f20b6674547856b14afaec7acea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/22bdbc3fd6164fc599d6353b53c6b7a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220122/c7daf7c1e0584673b84948703b7c9f9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220122/0234d4d2d2574a698b793267f884064a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220122/15b2df957dcd46e1b03da14121c74a71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220122/74a841e85859480fac873b9855ecc408.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220122/42b55d42894d4d9796d730bd2be39428.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220122/4b18ec1a5ff74842aa0f511e4b641d74.png
[https_www.imooc.com_video_12539]: https://www.imooc.com/video/12539