JS 使用正则表达式的方式

正则表达式无论在那一门语言中都发挥着「极大」的作用，有时候使用正则表达式能把几十行的代码缩减到几行。今天我们系统学习下 JS 所支持的正则表达式。

在 js 中创建正则两种方式：

1、通过字面量 /xxx/flag

性能好，适合正则表达式一直不变的情况，大多数使用的都是这种；

2、new RegExp('xxx', flag) 

这种方式性能不如第一种，适合正则表达式变化的情况。

在 js 中有两种方式使用正则：

1、使用正则表达式提供的方法

 test: 验证一个字符串是否满足正则，返回 true 或 false，主要用来查找字符串中是否包含了某个子字符串。举例：

const useTest = () => {
    const text = 'I am suyan. You can learn fe with suyan';
    let reg = /suyan/;
    let ret = reg.test(text);
    console.log('test: ', ret); // true
    ret = reg.test(text);
    console.log('test: ', ret); // true
    ret = reg.test(text);
    console.log('test: ', ret); // true
}
useTest();

 如果把上面的正则表达式变为 /suyan/g，添加一个标识 g，上面的结果完全不同，这是因为带 flag g 的正则表示是一种「带状态的查询」，会记录上一次的查找位置，下次查询会基于上次查询之后的位置进行查询：

const useTest = () => {
    const text = 'I am suyan. You can learn fe with suyan';
    let reg = /suyan/;
    let ret = reg.test(text);
    console.log('test: ', ret); // true
    ret = reg.test(text);
    console.log('test: ', ret); // true
    ret = reg.test(text);
    console.log('test: ', ret); // false
}
useTest();

exec: 执行一个查询，找到返回一个数组，否则返回 null

同样需要注意带 flag g 和不带的情况，使用 g 的情况可以查找整个字符串中满足条件的子字符串：

const useExec = () => {
    // 不带标识符 g
    const text = 'I am suyan. You can learn fe with suyan';
    let reg = /suyan/;
    let ret = reg.exec(text);
    console.log('exec: ', ret);
    /**
     exec:  [
        'suyan',
        index: 5,
        input: 'I am suyan. You can learn fe with suyan',
        groups: undefined
    ]
    */

    // 带有标识符 g 或 y，reg2 将是有状态的，可以遍历获取所有匹配结果
    // 不带标识是无状态的，使用 while 将出现死循环
    const reg2 = /suyan/g;
    let arr;
    while((arr = reg2.exec(text)) !== null) {
        // lastIndex 匹配上一次结果的索引
        console.log(`Found ${arr[0]}, next starts at ${reg2.lastIndex}`);
    }
    // Found suyan, next starts at 10
    // Found suyan, next starts at 39
}
useExec();

2、字符串提供的方法

字符串也提供了一些方法，可通过正则的方式来操作字符串：

match：这个方法同正则表达式的 exec 方法，只不过它是字符串的方法，举例：

const useMatch = () => {
    const text = 'I am suyan. You can learn fe with suyan';
    // 不带 g 将返回第一个匹配到的结果
    const reg = /suyan/;
    ret = text.match(reg);
    /**
    match:  [
        'suyan',
        index: 5,
        input: 'I am suyan. You can learn fe with suyan',
        groups: undefined
    ]
    */
    console.log('match: ', ret);

    // 带有 g 标记将返回一个匹配结果的数组
    // 设置了 g 标签将不会返回组
    const reg2 = /suyan/g;
    ret = text.match(reg2);
    // match2:  [ 'suyan', 'suyan' ]
    console.log('match2: ', ret);
}

matchAll：该方法正则必须带有 flag g，否则会报异常

如果查找到结果会返回一个迭代器，可通过 for-of 来遍历结果，举例：

const matchAll = () => {
    // matchAll 必须带有 g 表示
    const text = 'I am suyan. You can learn fe with suyan';
    let ret = text.matchAll(/suyan/g);
    for (const item of ret) {
        console.log('matchAll: ', item);
    }
    /**
     matchAll:  [
        'suyan',
        index: 5,
        input: 'I am suyan. You can learn fe with suyan',
        groups: undefined
    ]
    matchAll:  [
        'suyan',
        index: 34,
        input: 'I am suyan. You can learn fe with suyan',
        groups: undefined
    ]
    */
}

replace(pattern, replacement)，pattern 可以是字符串，也可以是正则表达式，replacement 可以是字符串，也可以是一个函数。返回值是一个新的字符串，替换后原字符串不会发生变化。

当 pattern 为字符串时，只有第一个符合条件的字符串才会被替换：

const text = 'I am suyan. learn fe with suyan';
// 如果是字符
let ret = text.replace('suyan', 'wsy');
// I am wsy. You can learn fe with suyan
console.log('replace: ', ret);

当 pattern 为正则表达式时，不带 flag g 只会替换第一个符合条件的字符串：

// 不带 g 将替换第一个符合条件的子字符串
const reg = /suyan/;
ret = text.replace(reg, 'wsy');
// I am wsy. learn fe with suyan
console.log('replace: ', ret);

当 pattern 为正则表达式时，带 flag g 会替换所有符合条件的字符串：

// 带有 g 标记将替换所有符合条件的子字符串
const reg2 = /suyan/g;
ret = text.replace(reg2, 'wsy');
// I am wsy. learn fe with wsy
console.log('replace: ', ret);

search: 该方法会返回第一个匹配的 index，如果未找到返回 -1

const text = 'I am suyan. You can learn fe with suyan';
let reg = /suyan/;
let ret = text.search(reg);
// 5
console.log('search: ', ret);

split: 可以把一个字符串拆分成一个数组，可使用正则表达式，例子中以数字拆分一个字符串：

const text = 'I8am1suyan2You3with';
let reg = /\d/;
let ret = text.split(reg);
//  [ 'I', 'am', 'suyan', 'You', 'with' ]
console.log('split: ', ret);

本节内容先到这里，我们下节内容学习如何写一个正则表达式，大家加油！！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/