js字符串匹配RegExp.exec 与 String.match的区别

364 阅读2分钟

在js中RegExp.exec和String.match都可以用正则表达式来获取字符串中的内容。

RegExp.exec 方法

注意事项

  1. 该方法在非全局匹配(没有/g)时,永远返回第一个符合条件的的字符串信息,如

image.png

  1. 在全局匹配时,每运行一次exec方法,则返回新的符合条件的字符串信息,直到字符串中没有能匹配的字符,则返回null。如

image.png

因此当我们想通过exec获取某个字符串中所有符合条件的字符时,可通过以下方式

image.png

String.match

注意事项

  1. 该方法在非全局匹配(没有/g)时,表示和Regx.exec差不多,都是返回第一个符合条件的字符串信息,如

image.png

  1. 在全局匹配时,match会返回所有符合条件的字符串,但不会返回其附加信息

image.png

RegExp.exec和String.match在匹配没有符合条件的字符串时,返回null

image.png

js中正则返回对象中,附加信息的含义

  1. index: 表示符合条件的字符串在原字符串中的索引
  2. input: 表示原字符串
  3. groups: 当有命名分组时,包含命名分组信息,无命名分组则为undefined

创建分组和命名分组

可以通过()来创建分组,通过(?<自定义名称>)来创建命名分组,如以下文本,我们想分别取出语言及其内容,并分别将其命名为language和content

 const str = "Eng: This is the English Content;Zh: 这是一段中文内容;";
const regx = /(?<language>[a-zA-Z]+:)(?<content>[\s\S]*?);/g;
const matchMsgs = [];
let matchMsg = "";
while ((matchMsg = regx.exec(str)) !== null) {
    matchMsgs.push(matchMsg);
}
console.log(matchMsgs);

结果为

image.png

非贪婪匹配

在js中,正则匹配为贪婪模式,即尽可能多地匹配字符,可以在量词后面加上?即可进行非贪婪匹配,上面例子中,假如将正则换成

const regx = /(?<language>[a-zA-Z]+:)(?<content>[\s\S]*);/g;

仔细观察可以发现,我们将(?<content>[\s\S]*?)后面的?去掉了。此时为贪婪匹配,使用上面的字符串去匹配,得到的结果为language: Eng,content: This is the English Content;Zh: 这是一段中文内容,如

image.png

正则常用的特殊表达式

image.png