前端正则表达式详解

没胡子x
125 阅读5分钟

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

语法

/pattern/attributes

创建 RegExp 对象的语法

new RegExp(_pattern_, _attributes_);

参数

  • 参数 _pattern_ 是一个字符串，指定了正则表达式的模式或其他正则表达式。
  • 参数 _attributes_ 是一个可选的字符串，包含属性"g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 _pattern_ 是正则表达式，而不是字符串，则必须省略该参数。

修饰符

  • 修饰符用于规定正则表达式的部分匹配规则(形式)
修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

方括号

  • 方括号用于查找某个范围内的字符
表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[abcd]查找给定集合内的任何字符。
[^abcd]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

元字符

  • 元字符（Metacharacter）是拥有特殊含义的字符
元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NUL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

  • 量词用于规定某段内容出现的数量/次数
量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
hxb(?=n)匹配 hxb 其后紧接指定字符串 n 的字符串。
hxb(?!n)匹配 hxb 其后没有紧接指定字符串 n 的字符串。
(?<=n)hxb匹配 hxb 其前有指定字符串 n 的字符串。
(?<!n)hxb匹配 hxb 其前没有指定字符串 n 的字符串。

RegExp 对象属性

属性描述
globalRegExp 对象是否具有标志 g。
ignoreCaseRegExp 对象是否具有标志 i。
lastIndex一个整数，标示开始下一次匹配的字符位置。
multilineRegExp 对象是否具有标志 m。
source正则表达式的源文本。

RegExp 对象方法

方法描述
compile编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法描述
search检索与正则表达式相匹配的值。
match找到一个或多个正则表达式的匹配。
replace替换与正则表达式匹配的子串。
split把字符串分割为字符串数组。

其他

  • 谈谈 ?=、?!、?<=、?<! 量词

前面我们有提到此量词，那么详细说一下他们的使用吧，前面的两个一般是向后匹配，而后面两个是向前匹配。

// 假设一种应用场景：我们需要去除一个字符串中的空格，但是如果是字符串中间的空格，我们需要保留，那么我们可以使用此量词来实现。
' 前空格   中间有三个空格保留一个 后空格   '.replace(/(^\s*)|(\s*$)|\s(?=\s)/g, ''); // '前空格 中间有三个空格保留一个 后空格'; 
// 其中 \s(?=\s) 表示空格后面还有空格的我们才替换掉。

// 在看一下第二个量词，表示不等于。
'helloworld helloothers'.replace(/hello(?!world)/, ''); // 'helloworld others'; 找到后面不是 world 的 hello 替换掉。

// 第三个与第四个恰恰相反
'helloworld testworld'.replace(/(?<=test)world/, ''); // 'helloworld test'; 找到前面是 test 的 world 替换掉。
'helloworld testworld'.replace(/(?<!hello)world/, ''); // 'helloworld test'; 找到前面不是 hello 的 world 替换掉。
  • replace 的使用
'123@456@789'.replace(/\d+/g, function (a, b, c) {
  // 没有组的时候，a 为每次匹配的内容，b 为每次匹配到的字符位置，c 为原始字符串。
  console.log({ a, b, c });
  // {a: '123', b: 0, c: '123@456@789'}
  // {a: '456', b: 4, c: '123@456@789'}
  // {a: '789', b: 8, c: '123@456@789'}
  switch (a) {
    case '123':
      return 'test1';
    case '456':
      return 'test2';
    case '789':
      return 'test3';
  }
  return 'test';
}); // test1@test2@test3

'123@456@789'.replace(/(\d+)/g, function (a, b, c, d) {
  // 如果我们写成组的时候，a 为每次匹配的内容，b 为每次组的内容，c 为每次匹配到的字符位置，最后 d 为原始字符串。
  console.log({ a, b, c, d });
  // {a: '123', b: '123', c: 0, d: '123@456@789'}
  // {a: '456', b: '456', c: 4, d: '123@456@789'}
  // {a: '789', b: '789', c: 8, d: '123@456@789'}
  switch (a) {
    case '123':
      return 'test1';
    case '456':
      return 'test2';
    case '789':
      return 'test3';
  }
  return 'test';
}); // test1@test2@test3

/* ------------------------------ 分割线 ------------------------------ */

'123456@qq.com'.replace(/^([\dA-Za-z]\w*)@(qq\.com)$/, function (a, b, c, d, e) {
  // 当有组的时候，a 为匹配字符串，b 为第一个组的内容，c 为第二个组的内容，以此类推。
  // 最后的两个分别为匹配到字符的位置、原始字符串(此处为 d e)。
  console.log({ a, b, c, d, e });
  // {a: '123456@qq.com', b: '123456', c: 'qq.com', d: 0, e: '123456@qq.com'}
  return `qq:${b};domain:${c}`;
}); // qq:123456;domain:qq.com

'123456@qq.com'.replace(/^(?<qq>[\dA-Za-z]\w*)@(?<domain>qq\.com)$/, function (a, b, c, d, e, f) {
  // 如果我们给组命名了，那么 a 为匹配字符串，b 为第一个组的内容，c 为第二个组的内容，以此类推。
  // 最后的三个分别为匹配到字符的位置、原始字符串(此处为 d e)、以组名为 key 的对象(此处为 f)。
  console.log({ a, b, c, d, e, f });
  // {a: '123456@qq.com', b: '123456', c: 'qq.com', d: 0, e: '123456@qq.com', f: {qq: '123456', domain: 'qq.com'}}
  return `qq:${b};domain:${c}`;
}); // qq:123456;domain:qq.com

多说一点

  • 组的使用

当我们小括号时，每个小括号里面的内容标识一个组，我们可以对组进行命名，甚至引用。

// 假设我们匹配一个邮箱号，我们在正则中添加两组小括号。
'123456@qq.com'.match(/^([\dA-Za-z]\w*)@(qq\.com)$/);
// 那么对应 组1 的内容则是我们匹配的 qq 部分，组2 则是域名部分。
console.log(RegExp.$1); // 123456; 为啥此处组是从 1 开始而不是从 0 呢？因为若从 0 开始，\0 与 NUL 表示符有冲突，且 0 其实就代表字符串本身，没有意义。
console.log(RegExp.$2); // qq.com

// 我们甚至可以这样做，进行组的引用或替换。
'XiongBiao He'.replace(/(\w+) (\w+)/, '$2$1'); // HeXiongBiao
/(helloworld) \1/.test('helloworld helloworld'); // true 
// \1 代表 组1 的内容，所以以下匹配是错误的。
/(helloworld) \1/.test('helloworld helloothers'); // false

// 如果我们迫不得已写了好几个组，但是只需其中一个，那么我们可以使用 ?: 来表示对该组不记录。
/^(?:red|green|blue) (#[\w\d]{3,6})$/.test('red #F00'); // true
console.log(RegExp.$1); // #F00，本来此处应该是 red，但是因为我们使用了 ?: 操作符来拒绝记录，所以此处变成了 #F00。

// 我们还可以对组进行命名，适用于我们组特别多且难以分辨计算的情况，也方便理解。
'123456@qq.com'.match(/^(?<qq>[\dA-Za-z]\w*)@(?<domain>qq\.com)$/);
// 当然组名也可以进行引用，但是需要使用 \k 符号。
/(?<groupName>helloworld) \k<groupName>/.test('helloworld helloworld'); // true

match_groups.png

  • 使用正则进行 Unicode 转化
escape('转码').toLocaleLowerCase().replace(/%u/gi, '\\u');
unescape('\u8f6c\u7801'.replace(/\\u/gi, '%u'));
avatar
文章
阅读
粉丝