乐趣区

关于小程序:JavaScript正则表达式常用技巧

jiezi

正则表达式是用于匹配字符串中字符组合的模式。在 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 标记，^和 $ 匹配的开始或完结输出字符串中的每一行，而不是整个字符串的开始或完结。

@参考：正则表达式

本文由博客一文多发平台 OpenWrite 公布！

退出移动版