JavaScript - 正则表达式



JavaScript 中的正则表达式 (RegExp) 是描述字符模式的对象。它可以包含字母、数字和特殊字符。此外,正则表达式模式可以包含单个或多个字符。

JavaScript RegExp 类表示正则表达式,String 和 RegExp 都定义了使用正则表达式对文本执行强大的模式匹配和搜索和替换功能的方法。

正则表达式用于搜索字符串中的特定模式或将模式替换为新字符串。

在 JavaScript 中有两种方法可以构造正则表达式。

  • 使用 RegExp() 构造函数。
  • 使用正则表达式 Literal.

语法

可以使用 RegExp () 构造函数定义正则表达式,如下所示 -


var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;

参数

以下是参数的描述 -

  • pattern - 指定正则表达式或其他正则表达式的模式的字符串。
  • attributes − 包含“g”、“i”和“m”属性中的任何一个可选字符串,这些属性分别指定全局匹配、不区分大小写匹配和多行匹配。

在我们学习正则表达式的示例之前,让我们了解正则表达式修饰符、量词、文字字符等。

修饰符

有几个修饰符可以简化您使用 regexp 的方式,例如区分大小写、在多行中搜索等。

修饰符 描述
i

执行不区分大小写的匹配。

m

指定如果字符串具有换行符或回车符,则 ^ 和 $ 运算符现在将与换行边界匹配,而不是与字符串边界匹配

g

执行全局匹配,即查找所有匹配项,而不是在第一个匹配项后停止。

方括号 ([])

方括号 ([]) 在正则表达式的上下文中使用时具有特殊含义。它们用于查找一系列字符。

正则表达式 描述
[...]

括号之间的任意一个字符。

[^...]

不在括号之间的任何一个字符。

[0-9]

 0 到 9 之间的任何十进制数字匹配。

[a-z]

匹配从小写 到小写 z 的任何字符。

[A-Z]

匹配从大写 A 到大写 Z 的任何字符。

[a-Z]

匹配从小写 a 到大写 Z 的任何字符。

上面显示的范围是通用的;您还可以使用范围 [0-3] 来匹配 0 到 3 之间的任何十进制数字,或者使用范围 [b-v] 来匹配 b 到 v 之间的任何小写字符。

量词

括号中的字符序列和单个字符的频率或位置可以用特殊字符表示。每个特殊字符都有特定的含义。+、*、?和 $ 标志都遵循字符序列。

表达式 描述
p+

匹配包含一个或多个 p 的任何字符串。

p*

匹配包含零个或多个 p 的任何字符串。

p?

匹配最多包含一个 p 的任何字符串。

p{N}

匹配任何包含 N 个 p 序列的字符串

p{2,3}

匹配任何包含两个或三个 p 序列的字符串。

p{2, }

匹配包含至少两个 p 的序列的任何字符串。

p$

匹配末尾带有 p 的任何字符串。

^p

匹配任何开头带有 p 的字符串。

?!p

匹配任何没有后跟字符串 p 的字符串。

例子

以下示例详细介绍了匹配字符。

表达式 描述
[^a-zA-Z]

匹配不包含从 a 到 z 和 A 到 Z 的任何字符的任何字符串。

p.p

匹配任何包含 p、后跟任何字符、然后是另一个 p 的字符串。

^.{2}$

匹配任何恰好包含两个字符的字符串。

<b>(.*)</b>

与 <b> 和 </b> 中包含的任何字符串匹配。

p(hp)*

匹配任何包含 p 后跟序列 hp 的零个或多个实例的字符串。

文本字符

文本字符可以在正则表达式中与反斜杠 (\) 一起使用。它们用于在正则表达式中插入特殊字符,例如 tab、null、Unicode 等。

表达式 描述
Alphanumeric

字母本身

\0

NUL 字符 (\u0000)

\t

Tab 键 (\u0009)

\n

换行符 (\u000A)

\v

垂直选项卡 (\u000B)

\f

换页 (\u000C)

\r

回车 (\u000D)

\xnn

由十六进制数 nn 指定的拉丁字符;例如,\x0A 与 \n 相同

\uxxxx

由十六进制数 xxxx 指定的 Unicode 字符;例如,\u0009 与 \t 相同

\cX

控制字符 ^X;例如,\cJ 等效于换行符 \n

元字符

元字符只是一个字母字符,前面有一个反斜杠,用于赋予组合特殊含义。

例如,你可以使用 '\d' 元字符搜索一大笔钱:/([\d]+)000/,这里 \d 将搜索任何数字字符字符串。

下表列出了一组可用于 PERL 样式正则表达式的元字符。

表达式 描述
.

单个字符

\s

空格字符 (空格、制表符、换行符)

\S

非空白字符

\d

一位数字 (0-9)

\D

非数字

\w

单词字符 (a-z, A-Z, 0-9, _)

\W

非单词字符

[\b]

文本退格键(特殊情况)。

[aeiou]

匹配给定集中的单个字符

[^aeiou]

匹配给定集合之外的单个字符

(foo|bar|baz)

匹配指定的任何替代项

下面我们来学习如何创建正则表达式。


 let exp = /qikepucom/i
  • /qikepucom/ – 它查找 'qikepucom' 字符串的匹配项。
  • i – 在将模式与字符串匹配时忽略字符的大小写。因此,它与 'QikepuCom' 或 'QIKEPUcom' 等匹配。

 let exp = /\d+/
  • \d – 它匹配 0 到 9 位数字。
  • + – 它与一个或多个数字匹配。

 let exp = /^Hi/
  • ^ - 它与文本的开头匹配。
  • Hi – 它检查文本的开头是否包含 'Hi'。

 Let exp = /^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,3}$/

上述正则表达式验证电子邮件。它看起来很复杂,但很容易理解。

  • ^ - 电子邮件地址的开头。
  • [a-zA-Z0-9] – 开头应包含字母数字字符。
  • + - 它应至少包含一个字母数字字符。
  • @ - 字母数字字符后必须包含“@”字符。
  • [a-zA-Z]+ - 在“@”字符后,它必须至少包含 1 个字母数字字符。
  • \. – 之后必须包含一个点。
  • [a-zA-Z] – 在点之后,电子邮件应包含字母字符。
  • {2, 3} – 点后,应仅包含 2 或 3 个字母字符。它指定长度。
  • $ - 它表示模式的结束。

现在,问题是我们是否可以使用 search()replace() 方法通过将字符串作为参数传递来搜索或替换字符串中的文本;那么正则表达式有什么需求呢?

问题很明显。让我们通过下面的示例来理解它。

在下面的示例中,我们使用正则表达式 literal 来定义正则表达式。该模式匹配 'qikepucom' 字符串,而不比较字符的大小写。

在第一种情况下,字符串 search() 方法搜索 'qikepucom' 字符串,该字符串执行区分大小写的匹配。因此,它返回 -1。

在第二种情况下,我们将正则表达式作为 search() 方法的参数传递。它执行不区分大小写的匹配。因此,它返回 11,即所需模式的索引。


<html>
<head>
   <title> JavaScript - Regular Expression </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      let pattern = /qikepucom/i;
      let str = "Welcome to qikepucom! It is a good website!";
      let res = str.search('qikepucom');
      output.innerHTML += "Searching using the string : " + res + "<br>";
      res = str.search(pattern);
      output.innerHTML += "Searching using the regular expression : " + res;
   </script>
</body>
</html>

执行程序以查看所需的结果。

在下面的示例中,我们使用 replace() 方法匹配模式并将其替换为 '100' 字符串。

在这里,模式匹配这对数字。输出显示字符串中的每个数字都替换为 '100'。您还可以在字符串中添加字母字符。


<html>
<head>
   <title> JavaScript - Regular expression </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      let pattern = /\d+/g; // Matches pair of digits
      let str = "10, 20, 30, 40, 50";

      let res = str.replace(pattern, "100");
      document.getElementById("output").innerHTML = 
        "String after replacement : " + res;
   </script>
</body>
</html>

执行程序以查看所需的结果。

示例(电子邮件验证)

在下面的示例中,我们使用带有 'new' 关键字的 RegExp() 构造函数来创建正则表达式。此外,我们还将字符串格式的模式作为构造函数的参数传递。

在这里,我们使用正则表达式验证电子邮件。在第一种情况下,电子邮件有效。在第二种情况下,电子邮件不包含 '@' 字符,因此 test() 方法返回 false。


<html>
<body>
   <p id = "output"> </p>
   <script>
      const pattern = new RegExp('^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,3}$');
      document.getElementById("output").innerHTML = 
        "abcd@gmail.com is valid? : " + pattern.test('abcd@gmail.com') + "<br>" +
      "abcdgmail.com is valid? : " + pattern.test('abcdgmail.com');
</script>
</body>
</html>

因此,正则表达式可用于在文本中查找特定模式并执行 replace 等操作。

正则表达式属性

以下是与 RegExp 关联的属性列表及其描述。

属性. 描述
constructor

指定用于创建对象原型的函数。

global

指定是否设置了 “g” 修饰符。

ignoreCase

指定是否设置了 “i” 修饰符。

lastIndex

开始下一个匹配项的索引。

multiline

指定是否设置了 “m” 修饰符。

source

模式的文本。

在以下部分中,我们将提供一些示例来演示 RegExp 属性的用法。

正则表达式方法

以下是与 RegExp 关联的方法列表及其描述

方法 描述
exec()

在其 string 参数中执行匹配项的搜索。

test()

测试其 string 参数中的匹配项。

toSource()

返回表示指定对象的对象文本;您可以使用此值创建新对象。

toString()

返回表示指定对象的字符串。

在以下部分中,我们将提供一些示例来演示 RegExp 方法的用法。