正则表达式遇到的单词边界问题

45 阅读1分钟

需求:在lint-staged中自定义脚本,脚本读取当前文档,将文档中所有的red10替换为red-10替换为red。 有问题的写法:

const replace = (text, key, values) => values.reduce((text,value)=>{
    // console.log('value,key')
    return text.replace(new RegExp(`\\${value}`, 'g'), key);
},text);

该写法会将$red-10替换为$red0,原因在于:在 red10 之间没有一个单词边界,替换后的变量名不在一个单词的边界上,因此,$red-10 替换成了 $red0。 正确写法:

const replace = (text, key, values) => {
    values.forEach(value => {
        const regex = new RegExp(`\\${value}\\b`, 'g');
        // replace函数的第二个参数中,$符号是保留字,$$可插入一个$符号。
        text = text.replace(regex, `$${key}`);
        
    });
    return text;
};