【小程序】JavaScript正则表达式常用技巧

  • Z时代
  • 2024-01-10
  • 分类：IT

【小程序】JavaScript正则表达式常用技巧

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。正则表达式的掌握程度能粗略地看出程序员的技术底子，所以技术面试、编程竞赛等 都特别喜欢考察正则表达式。本篇就带你一起夯实一下 JavaScript 正则表达式的一些使用技巧：

创建正则表达式

在 JavaScript 的世界，创建正则表达式有2个方法：
（1）使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。比如 ：

const reg = /ab+c/

（2）调用RegExp对象的构造函数。比如：

const reg = new RegExp("ab+c")

注意：以上2个方法虽然都能创建正则表达式，但是还是有区别的：
（1）使用第一个方法，在脚本加载后正则表达式字面量就会被编译。当正则表达式保持不变时，使用此方法可获得更好的性能。
（2）使用第二个方法，在脚本运行过程中用构造函数创建的正则表达式会被编译。如果正则表达式将会改变，或者它将会从用户输入等来源中动态地产生，就需要使用构造函数来创建正则表达式。

当然，这样表述可能不太深刻，下面找一道面试题带你实践一下。

经典面试题 "Word Finder"

题目要求：
使用一个方法来扩展字典，该方法返回与模式匹配的单词列表。这个模式可以包含字母(小写)和占位符("?")。占位符只代表一个任意的字母，比如：
const fruits = new Dictionary(['banana', 'apple', 'papaya', 'cherry']);
fruits.getMatchingWords('lemon');     // must return []
fruits.getMatchingWords('cherr??');   // must return []
fruits.getMatchingWords('?a?a?a');    // must return ['banana', 'papaya']
fruits.getMatchingWords('??????');    // must return ['banana', 'papaya', 'cherry']
补充说明：
（1）单词和模式都是小写
（2）返回单词的顺序无关紧要

上面这道题目是典型的 正则表达式应用题，考察的知识点是2个：
（1）使用 RegExp 对象 动态创建正则表达式
（2）使用 /./ 匹配一个任意字符

因此不难有如下解决方案（ps：这个是我的解决方案，虽然解法比较low，但是逻辑应该还算清晰，容易理解）

// 字典构造器
function Dictionary(words) {
this.words = words;
}
// 原型里拓展解法
Dictionary.prototype.getMatchingWords = function(pattern) {
let res = []
const reg = new RegExp("^" + pattern.replace(/\?/g, '.') + "$")  // 创建正则表达式
for (let x of this.words) {
if (reg.test(x)) res.push(x)
}
return res
}

正则表达式模式

一个正则表达式模式是由简单的字符所构成的，比如 /abc/；或者是简单和特殊字符的组合，比如 /ab*c/ 或 /Chapter (\d+)\.\d*/

简单模式

简单模式是由想要匹配的具体字符组成，且严格匹配字符顺序。比如，/abc/ 这个模式就能且仅能匹配 "abc" 字符按照顺序同时出现的情况，而 "bac" 或 "cab" 等就无法匹配。

特殊字符

当需要匹配一个不确定的字符串时，比如寻找一个或多个 "b"，或者寻找空格，可以在模式中使用特殊字符。特殊字符还包括如下：

  • 断言：表示一个匹配在某些条件下发生。断言包括先行断言、后行断言和条件表达式

  • 字符类：区分不同类型的字符，例如区分字母和数字

  • 组和范围：表示表达式字符的分组和范围

  • 量词：表示匹配的字符或条件表达式的数量

  • Unicode属性转义：基于 Unicode字符属性区分字符，例如大写和小写字母、数字符合和标点

Escaping

当需要使用任何特殊字符的字面值（例如，搜索字符 *），你必须通过在它前面放一个反斜杠来转义它。 例如，要搜索'a'后跟*后跟'b'，你应该使用 /a\*b/- 反斜杠“转义”字符 *，使其成为文字而非特殊符号。将用户输入转义为正则表达式中的一个字面字符串，可以通过简单的替换来实现：

function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");   //$&表示整个被匹配的字符串
}

使用正则表达式

前面讲到，正则表达式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。这些方法在 JavaScript 手册 中有详细的解释，下面只简单罗列下各自功能，不做展开：

  • exec：在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）

  • test：在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false

  • match：在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null

  • matchAll：在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）

  • search：在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回 -1

  • replace：在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串

  • split：使用正则表达式或者一个固定字符串分隔一个字符串的String方法，并将分隔后的子字符串存储到数组中

一个简单的快速记忆方法：
（1）想要知道在一个字符串中的一个匹配是否被找到，使用 test 或 search 方法
（2）想得到更多的信息（但是比较慢）则可以使用 exec 或 match 方法

举个栗子，使用exec方法在一个字符串中查找一个匹配：

const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdbsbz");

如果不需要访问正则表达式的属性，这个脚本通过另一个方法来创建myArray：

const myArray = /d(b+)d/g.exec("cdbbdbsbz");
// 和 "cdbbdbsbz".match(/d(b+)d/g); 相似。
// 但是 "cdbbdbsbz".match(/d(b+)d/g) 输出数组 [ "dbbd" ]，
// 而 /d(b+)d/g.exec('cdbbdbsbz') 输出数组 [ "dbbd", "bb", index: 1, input: "cdbbdbsbz" ].

如果想通过一个字符串构建正则表达式，那么这个脚本还有另一种方法：

const myRe = new RegExp("d(b+)d", "g");
const myArray = myRe.exec("cdbbdbsbz");

使用括号的子字符串匹配

一个正则表达式模式使用括号，将导致相应的子匹配被记住。例如，/a(b)c / 可以匹配字符串“abc”，并且记得“b”。回调这些括号中匹配的子串，使用数组元素[1],……[n]。

使用括号匹配的子字符串的数量是无限的。返回的数组中保存所有被发现的子匹配。下面的例子说明了如何使用括号的子字符串匹配。

下面的脚本使用 replace() 方法来转换字符串中的单词。在匹配到的替换文本中，脚本使用替代的$1, $2 表示第一个和第二个括号的子字符串匹配：

const re = /(\w+)\s(\w+)/;
const str = "John Smith";
const newstr = str.replace(re, "$2, $1");
console.log(newstr);   // 输出 "Smith, John"

通过标志进行高级搜索

正则表达式有六个可选参数 (flags) 允许全局和不分大小写搜索等。这些参数既可以单独使用也能以任意顺序一起使用, 并且被包含在正则表达式实例中：

  • g：全局搜索

  • i：不区分大小写搜索

  • m: 多行搜索

  • s：允许.匹配换行符

  • u：使用Unicode码的模式进行匹配

  • y：执行“粘性(sticky)”搜索, 匹配从目标字符串的当前位置开始

例如，re = /\w+\s/g 将创建一个查找一个或多个字符后有一个空格的正则表达式，或者组合起来像此要求的字符串：

const re = /\w+\s/g;
const str = "fee fi fo fum";
const myArray = str.match(re);
console.log(myArray);
// ["fee ", "fi ", "fo "]

使用 .exec() 方法时，与 g 标志关联的行为是不同的。 （“class”和“argument”的作用相反：在.match()的情况下，字符串类（或数据类型）拥有该方法，而正则表达式只是一个参数，而在.exec()的情况下，它是拥有该方法的正则表达式，其中字符串是参数。对比str.match(re)与re.exec(str) ), g标志与.exec()方法一起使用获得迭代进展：

const xArray; while(xArray = re.exec(str)) console.log(xArray);
// produces:
// ["fee ", index: 0, input: "fee fi fo fum"]
// ["fi ", index: 4, input: "fee fi fo fum"]
// ["fo ", index: 7, input: "fee fi fo fum"]

除此之外，m标志用于指定多行输入字符串应该被视为多个行。如果使用m标志，^和$匹配的开始或结束输入字符串中的每一行，而不是整个字符串的开始或结束。

@参考：正则表达式

以上是 【小程序】JavaScript正则表达式常用技巧 的全部内容， 来源链接： utcz.com/p/103543.html

回到顶部