JS--正则表达式的用法
原文网址：JS--正则表达式的用法-CSDN博客
简介
本文介绍JS正则表达式的用法。
在 JavaScript 中，可通过 RegExp 对象使用它，也可以与字符串方法结合使用。
创建正则表达式
创建方法
正则表达式由模式和可选的修饰符组成。
有两种创建正则表达式对象的语法：
- regexp = new RegExp("pattern", "flags");
- regexp = /pattern/; // 没有修饰符
regexp = /pattern/gmi; // 带有修饰符 g、m 和 i
斜线 /.../：告诉 JS 我们正在创建正则表达式。它的作用与字符串的引号作用相同。
这两种语法的区别在于：/.../ 的模式不允许插入表达式（如带有 ${...} 的字符串模板）。它是完全静态的。
修饰符
- i：不区分大小写：A 和 a 之间没有区别（请参见下面的示例）。
- g：寻找所有的匹配项（若不用此选项，仅返回第一个匹配项。）
- m：多行模式。
- s：启用 “dotall” 模式，允许点.匹配换行符\n。
- u：开启完整的 Unicode 支持。该修饰符能够正确处理代理对。
- y：粘滞（Sticky）模式
RegExp
方法
- exec()：测试字符串中的匹配项。返回第一个匹配项。
- test()：测试字符串中的匹配项。返回 true 或 false。
示例1：exec
var text = "cat, bat, sat, fat";
var pattern2 = /.at/g;var matches = pattern2.exec(text);
console.log(matches.index); // 0
console.log(matches[0]); // cat
console.log(pattern2.lastIndex); // 3// 再次执行，会跳过第一个匹配
matches = pattern2.exec(text);
console.log(matches.index); // 5
console.log(matches[0]); // bat
console.log(pattern2.lastIndex); // 8
示例2：test
var text="000-00-0000";
var pattern=/\d{3}-\d{2}-\d{4}/;
if(pattern.test(text)){console.log("The pattern was matched.");
}
属性
RegExp每个实例都具有下列属性，通过这些属性可以取得有关模式的各种信息。
- global：布尔值，表示是否设置了g标志
- ignoreCase：布尔值，表示是否设置了i标志
- multiline：布尔值，表示是否设置了m标志
- lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从0算起
- source：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回
示例
var pattern1 = /\[bc\]at/i;
// 等价于
var pattern1 = new RegExp("\\[bc\\]at", "i");console.log(pattern1.global); //false
console.log(pattern1.ignoreCase); //true
console.log(pattern1.multiline); //false
console.log(pattern1.lastIndex); //0
console.log(pattern1.source); // \[bc\]at
字符串的正则方法
- str.match(regexp)：在字符串 str 中查找 regexp 的匹配项。
- str.matchAll(regexp)：是 str.match 的改进的变体。
- str.split(regexp|substr, limit)：使用正则表达式（或子字符串）作为分隔符来分割字符串。
- str.search(regexp)：返回第一个匹配项的位置，如果没找到，则返回 -1
- str.replace(str|regexp, str|func)：用于搜索和替换
- str.replaceAll(str|regexp, str|func)：用于搜索和替换
str.match(regexp)
它有 3 种模式
1.regexp 不带有修饰符 g
以数组的形式返回第一个匹配项：包含捕获组和属性 index（匹配项的位置）、input（输入字符串，等于 str）
let str = "I love JavaScript";let result = str.match(/Java(Script)/);alert( result[0] ); // JavaScript（完全匹配）
alert( result[1] ); // Script（第一个分组）
alert( result.length ); // 2// 其他信息：
alert( result.index ); // 7（匹配位置）
alert( result.input ); // I love JavaScript（源字符串）2.regexp 带有修饰符 g
此时返回一个包含所有匹配项的数组，但不包含捕获组和其它详细信息。
let str = "I love JavaScript";let result = str.match(/Java(Script)/g);alert( result[0] ); // JavaScript
alert( result.length ); // 13.没有匹配项
此时无论是否带有修饰符 g，都将返回 null。
这是一个重要的细微差别。如果没有匹配项，我们得到的不是一个空数组，而是 null。忘记这一点很容易出错，例如：
let str = "I love JavaScript";let result = str.match(/HTML/);alert(result); // null
alert(result.length); // Error: Cannot read property 'length' of nullstr.matchAll(regexp)
用来搜索所有组的所有匹配项。str.matchAll(regexp) 是 str.match 的“更新、改进”的变体。这是最近添加到 JavaScript 的特性。 旧式浏览器可能需要 polyfills。
与 match 相比有 3 个区别：
- 返回一个包含匹配项的可迭代对象，而不是数组。我们可以用 Array.from 将其转换为一个常规数组。
- 每个匹配项均以一个包含捕获组的数组形式返回（返回格式与不带修饰符 g 的 str.match 相同）。
- 如果没有结果，则返回的是一个空的可迭代对象而不是 null。
用法示例：
let str = '<h1>Hello, world!</h1>';
let regexp = /<(.*?)>/g;let matchAll = str.matchAll(regexp);alert(matchAll); // [object RegExp String Iterator]，不是数组，而是一个可迭代对象matchAll = Array.from(matchAll); // 现在是数组了let firstMatch = matchAll[0];
alert( firstMatch[0] ); // <h1>
alert( firstMatch[1] ); // h1
alert( firstMatch.index ); // 0
alert( firstMatch.input ); // <h1>Hello, world!</h1>如果我们用 for..of 来遍历 matchAll 的匹配项，那么我们就不需要 Array.from 了。
str.split(regexp|substr, limit)
使用正则表达式（或子字符串）作为分隔符来分割字符串。
可以用 split 来分割字符串，像这样：
alert('12-34-56'.split('-')) // 数组 ['12', '34', '56']但同样，我们也可以用正则表达式：
alert('12, 34, 56'.split(/,\s*/)) // 数组 ['12', '34', '56']str.search(regexp)
返回第一个匹配项的位置，如果没找到，则返回 -1：
let str = "A drop of ink may make a million think";alert( str.search( /ink/i ) ); // 10（第一个匹配位置）重要限制：search 仅查找第一个匹配项。
如果我们需要其他匹配项的位置，则应使用其他方法，例如用 str.matchAll(regexp) 查找所有位置。
str.replace(str|regexp, str|func)
用于搜索和替换。
常用方法
例1：不用正则进行替换（只替换第一个匹配项）
// 用冒号替换连字符
alert('12-34-56'.replace("-", ":")) // 12:34-56当 replace 的第一个参数是字符串时，只替换第一个匹配项。可以在上面的示例中看到：只有第一个 "-" 被替换为了 ":"。
例2：用正则进行替换（可以替换所有匹配项）
如果想找到所有的匹配项，应使用带 g 修饰符的正则表达式 /xxx/g：
// 将所有连字符都替换为冒号
alert( '12-34-56'.replace( /-/g, ":" ) ) // 12:34:56替换字符串使用特殊字符
第二个参数是替换字符串。我们可以在其中使用特殊字符：
| 符号 | 替换字符串中的行为 |
| $& | 插入整个匹配项 |
| $` | 插入字符串中匹配项之前的字符串部分 |
| $' | 插入字符串中匹配项之后的字符串部分 |
| $n | 如果 n 是一个 1-2 位的数字，则插入第 n 个分组的内容 |
| $<name> | 插入带有给定 name 的括号内的内容 |
| $$ | 插入字符 $ |
例如：
let str = "John Smith";// 交换名字和姓氏
alert(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John替换字符串使用函数
对于需要“智能”替换的场景，第二个参数可以是一个函数。每次匹配都会调用这个函数，并且返回的值将作为替换字符串插入。
函数格式：func(match, p1, p2, ..., pn, offset, input, groups) 。如果正则表达式中没有括号，则只有 3 个参数：func(str, offset, input)。参数含义如下
- match：匹配项，
- p1, p2, ..., pn：捕获组的内容（如有），
- offset：匹配项的位置，
- input：源字符串，
- groups：具有命名的捕获组的对象。
例1：将所有匹配项都大写
let str = "html and css";let result = str.replace(/html|css/gi, str => str.toUpperCase());alert(result); // HTML and CSS例2：将每个匹配项替换为其在字符串中的位置
alert("Ho-Ho-ho".replace(/ho/gi, (match, offset) => offset)); // 0-3-6例3：调换指定的值
let str = "John Smith";let result = str.replace(/(\w+) (\w+)/, (match, name, surname) => `${surname}, ${name}`);alert(result); // Smith, John如果有许多组，用 rest 参数（…）可以很方便的访问：
let str = "John Smith";let result = str.replace(/(\w+) (\w+)/, (...match) => `${match[2]}, ${match[1]}`);alert(result); // Smith, John或者，如果我们使用的是命名组，则带有它们的 groups 对象始终是最后一个对象，所以我们可以像这样获取它：
let str = "John Smith";let result = str.replace(/(?<name>\w+) (?<surname>\w+)/, (...match) => {let groups = match.pop();return `${groups.surname}, ${groups.name}`;
});alert(result); // Smith, Johnstr.replaceAll(str|regexp, str|func)
用途：替换所有出现的字符串。
这个方法与 str.replace 本质上是一样的，但有两个主要的区别：
- 如果第一个参数是一个字符串，它会替换所有匹配的字符串，而 replace 只会替换第一个。
- 如果第一个参数是一个没有修饰符 g 的正则表达式，则会报错。如果带有修饰符 g，它的工作方式与 replace 相同。
例1：
// 使用冒号替换所有破折号
alert('12-34-56'.replaceAll("-", ":")) // 12:34:56高级用法
分组
可以在正则表达式中使用()进行分组。
示例：
let str = 'aa(Name1)';
let regex = /(.+)\((.+)\)/;
let matches = str.match(regex);let data1;
let data2;
if (matches) {data1 = matches[1];data2 = matches[2];
}console.log('data1:' + data1 + ';' + 'data2:' + data2); //data1:aa;data2:Name1