前端基础学习——javaScript正则表达式详解

我不是女神ヾ 2024-04-07 12:23 21阅读 0赞

**目录**

一. 什么是正则表达式？

二. 使用字符串方法

2.1 search() 方法使用正则表达式

2.2 search() 方法使用字符串

2.3 replace() 方法使用正则表达式

2.4 replace() 方法使用字符串

三. RegExp 对象

3.1 修饰符

3.2 方括号

3.3 元字符

3.4 量词

3.5 RegExp 对象方法

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

3.7 RegExp 对象属性

3.8 使用 test()

3.9 使用 exec()

--------------------

## 一. 什么是正则表达式？ ##

> 正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
> 
>  *  搜索模式可用于文本搜索和文本替换。
>  *  正则表达式是由一个字符序列形成的搜索模式。
>  *  当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
>  *  正则表达式可以是一个简单的字符，或一个更复杂的模式。
>  *  正则表达式可用于所有文本搜索和文本替换的操作。

> 语法：/正则表达式主体/修饰符（其中修饰符是可选的）。

--------------------

## 二. 使用字符串方法 ##

> 在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
> 
>  *  **search()：**方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
>  *  **replace()：**方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

### 2.1 search() 方法使用正则表达式 ###

> 使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：

var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);

> 输出结果为：6

### 2.2 search() 方法使用字符串 ###

> search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

> 检索字符串中 "Runoob" 的子串：

var str = "Visit Runoob!"; 
    var n = str.search("Runoob");

### 2.3 replace() 方法使用正则表达式 ###

> 使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");

> 结果输出为：Visit Runoob!

### 2.4 replace() 方法使用字符串 ###

> replace() 方法将接收字符串作为参数：

var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");

>  *  正则表达式参数可用在以上方法中 (替代字符串参数)。
>  *  正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

--------------------

## 三. RegExp 对象 ##

> 在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

### 3.1 修饰符 ###

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

<table> 
 <tbody> 
  <tr> 
   <th>修饰符</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/js/jsref-regexp-i.html" title="i" rel="nofollow">i</a></td> 
   <td>执行对大小写不敏感的匹配。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/js/jsref-regexp-g.html" title="g" rel="nofollow">g</a></td> 
   <td>执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。</td> 
  </tr> 
  <tr> 
   <td>m</td> 
   <td>执行多行匹配。</td> 
  </tr> 
 </tbody> 
</table>

### 3.2 方括号 ###

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

<table> 
 <tbody> 
  <tr> 
   <th>表达式</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-charset.html" title="[abc]" rel="nofollow">[abc]</a></td> 
   <td>查找方括号之间的任何字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-charset-not.html" title="[^abc]" rel="nofollow">[^abc]</a></td> 
   <td>查找任何不在方括号之间的字符。</td> 
  </tr> 
  <tr> 
   <td>[0-9]</td> 
   <td>查找任何从 0 至 9 的数字。</td> 
  </tr> 
  <tr> 
   <td>[a-z]</td> 
   <td>查找任何从小写 a 到小写 z 的字符。</td> 
  </tr> 
  <tr> 
   <td>[A-Z]</td> 
   <td>查找任何从大写 A 到大写 Z 的字符。</td> 
  </tr> 
  <tr> 
   <td>[A-z]</td> 
   <td>查找任何从大写 A 到小写 z 的字符。</td> 
  </tr> 
  <tr> 
   <td>[adgk]</td> 
   <td>查找给定集合内的任何字符。</td> 
  </tr> 
  <tr> 
   <td>[^adgk]</td> 
   <td>查找给定集合外的任何字符。</td> 
  </tr> 
  <tr> 
   <td>(red|blue|green)</td> 
   <td>查找任何指定的选项。</td> 
  </tr> 
 </tbody> 
</table>

### 3.3 元字符 ###

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

<table> 
 <tbody> 
  <tr> 
   <th>元字符</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-dot.html" title="." rel="nofollow">.</a></td> 
   <td>查找单个字符，除了换行和行结束符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-wordchar.html" title="\w" rel="nofollow">\w</a></td> 
   <td>查找数字、字母及下划线。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-wordchar-non.html" title="\W" rel="nofollow">\W</a></td> 
   <td>查找非单词字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-digit.html" title="\d" rel="nofollow">\d</a></td> 
   <td>查找数字。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-digit-non.html" title="\D" rel="nofollow">\D</a></td> 
   <td>查找非数字字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-whitespace.html" title="\s" rel="nofollow">\s</a></td> 
   <td>查找空白字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-whitespace-non.html" title="\S" rel="nofollow">\S</a></td> 
   <td>查找非空白字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-begin.html" title="\b" rel="nofollow">\b</a></td> 
   <td>匹配单词边界。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-begin-not.html" title="\B" rel="nofollow">\B</a></td> 
   <td>匹配非单词边界。</td> 
  </tr> 
  <tr> 
   <td>\0</td> 
   <td>查找 NULL 字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-newline.html" title="\n" rel="nofollow">\n</a></td> 
   <td>查找换行符。</td> 
  </tr> 
  <tr> 
   <td>\f</td> 
   <td>查找换页符。</td> 
  </tr> 
  <tr> 
   <td>\r</td> 
   <td>查找回车符。</td> 
  </tr> 
  <tr> 
   <td>\t</td> 
   <td>查找制表符。</td> 
  </tr> 
  <tr> 
   <td>\v</td> 
   <td>查找垂直制表符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-octal.html" title="\xxx" rel="nofollow">\xxx</a></td> 
   <td>查找以八进制数 xxx 规定的字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-hex.html" title="\xdd" rel="nofollow">\xdd</a></td> 
   <td>查找以十六进制数 dd 规定的字符。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-unicode-hex.html" title="\uxxxx" rel="nofollow">\uxxxx</a></td> 
   <td>查找以十六进制数 xxxx 规定的 Unicode 字符。</td> 
  </tr> 
 </tbody> 
</table>

### 3.4 量词 ###

<table> 
 <tbody> 
  <tr> 
   <th style="width:69px;">量词</th> 
   <th style="width:619px;">描述</th> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-onemore.html" title="n+" rel="nofollow">n+</a></td> 
   <td style="width:619px;"> <p>匹配任何包含至少一个 n 的字符串。</p> <p></p> <p>例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-zeromore.html" title="n*" rel="nofollow">n*</a></td> 
   <td style="width:619px;"> <p>匹配任何包含零个或多个 n 的字符串。</p> <p>例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-zeroone.html" title="n?" rel="nofollow">n?</a></td> 
   <td style="width:619px;"> <p>匹配任何包含零个或一个 n 的字符串。</p> <p>例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-nx.html" title="n{X}" rel="nofollow">n{X}</a></td> 
   <td style="width:619px;"> <p>匹配包含 X 个 n 的序列的字符串。</p> <p>例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-nxcomma.html" title="n{X,}" rel="nofollow">n{X,}</a></td> 
   <td style="width:619px;"> <p>X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。</p> <p>例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-nxy.html" title="n{X,Y}" rel="nofollow">n{X,Y}</a></td> 
   <td style="width:619px;"> <p>X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。</p> <p>例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-ndollar.html" title="n$" rel="nofollow">n$</a></td> 
   <td style="width:619px;">匹配任何结尾为 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-ncaret.html" title="^n" rel="nofollow">^n</a></td> 
   <td style="width:619px;">匹配任何开头为 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-nfollow.html" title="?=n" rel="nofollow">?=n</a></td> 
   <td style="width:619px;">匹配任何其后紧接指定字符串 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td style="width:69px;"><a href="https://www.runoob.com/jsref/jsref-regexp-nfollow-not.html" title="?!n" rel="nofollow">?!n</a></td> 
   <td style="width:619px;">匹配任何其后没有紧接指定字符串 n 的字符串。</td> 
  </tr> 
 </tbody> 
</table>

### 3.5 RegExp 对象方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-compile.html" title="compile" rel="nofollow">compile</a></td> 
   <td>在 1.5 版本中已废弃。&nbsp;编译正则表达式。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-exec-regexp.html" title="exec" rel="nofollow">exec</a></td> 
   <td>检索字符串中指定的值。返回找到的值，并确定其位置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-test-regexp.html" title="test" rel="nofollow">test</a></td> 
   <td>检索字符串中指定的值。返回 true 或 false。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-tostring.html" title="toString" rel="nofollow">toString</a></td> 
   <td>返回正则表达式的字符串。</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>FF</th> 
   <th>IE</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/js/jsref-search.html" title="search" rel="nofollow">search</a></td> 
   <td>检索与正则表达式相匹配的值。</td> 
   <td>1</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/js/jsref-match.html" title="match" rel="nofollow">match</a></td> 
   <td>找到一个或多个正则表达式的匹配。</td> 
   <td>1</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/js/jsref-replace.html" title="replace" rel="nofollow">replace</a></td> 
   <td>替换与正则表达式匹配的子串。</td> 
   <td>1</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/js/jsref-split.html" title="split" rel="nofollow">split</a></td> 
   <td>把字符串分割为字符串数组。</td> 
   <td>1</td> 
   <td>4</td> 
  </tr> 
 </tbody> 
</table>

### 3.7 RegExp 对象属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-constructor.html" title="constructor" rel="nofollow">constructor</a></td> 
   <td>返回一个函数，该函数是一个创建 RegExp 对象的原型。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-global.html" title="global" rel="nofollow">global</a></td> 
   <td>判断是否设置了 "g" 修饰符</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-regexp-ignorecase.html" title="ignoreCase" rel="nofollow">ignoreCase</a></td> 
   <td>判断是否设置了 "i" 修饰符</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-lastindex-regexp.html" title="lastIndex" rel="nofollow">lastIndex</a></td> 
   <td>用于规定下次匹配的起始位置</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-multiline-regexp.html" title="multiline" rel="nofollow">multiline</a></td> 
   <td>判断是否设置了 "m" 修饰符</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jsref/jsref-source-regexp.html" title="source" rel="nofollow">source</a></td> 
   <td>返回正则表达式的匹配模式</td> 
  </tr> 
 </tbody> 
</table>

### 3.8 使用 test() ###

>  *  test()：方法是一个正则表达式方法。
>  *  test()：方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

> 用于搜索字符串中的字符 "e"：

var patt = /e/;
    patt.test("The best things in life are free!");

> 字符串中含有 "e"，所以该实例输出为：true

> 你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
> 
> /e/.test("The best things in life are free!")

### 3.9 使用 exec() ###

>  *  exec() 方法是一个正则表达式方法。
>  *  exec() 方法用于检索字符串中的正则表达式的匹配。
>  *  该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

> 用于搜索字符串中的字母 "e"：/e/.exec("The best things in life are free!");

> 字符串中含有 "e"，所以该实例输出为:e