JavaScript正则表达式常用技巧

插图

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExp 的 exectest 方法, 以及 String 的 matchmatchAllreplacesearchsplit 方法。正则表达式的掌握程度能粗略地看出程序员的技术底子,所以技术面试、编程竞赛等 都特别喜欢考察正则表达式。本篇就带你一起夯实一下 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 的 exectest 方法以及 String 的 matchreplacesearchsplit 方法。这些方法在 JavaScript 手册 中有详细的解释,下面只简单罗列下各自功能,不做展开:

  • exec:在字符串中执行查找匹配的 RegExp 方法,它返回一个数组(未匹配到则返回 null
  • test:在字符串中测试是否匹配的 RegExp 方法,它返回 truefalse
  • match:在字符串中执行查找匹配的 String 方法,它返回一个数组,在未匹配到时会返回 null
  • matchAll:在字符串中执行查找所有匹配的 String 方法,它返回一个迭代器(iterator
  • search:在字符串中测试匹配的 String 方法,它返回匹配到的位置索引,或者在失败时返回 -1
  • replace:在字符串中执行查找匹配的 String 方法,并且使用替换字符串替换掉匹配到的子字符串
  • split:使用正则表达式或者一个固定字符串分隔一个字符串的String方法,并将分隔后的子字符串存储到数组中

一个简单的快速记忆方法:
(1)想要知道在一个字符串中的一个匹配是否被找到,使用 testsearch 方法
(2)想得到更多的信息(但是比较慢)则可以使用 execmatch 方法

举个栗子,使用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 发布!

posted @ 2020-08-15 17:14  Jafeney  阅读(253)  评论(0编辑  收藏  举报