JS字符串全词替换函数遇非字母字符包围时失效，如何修复？

问题描述 #

原函数试图实现字符串中完整单词的替换，但当目标单词包含非字母字符（如引号）时无法正常工作：

原函数代码：

var replaceWord = function(str,src,tgt){
    var regex =  new RegExp("\b"+src+"\b","g"); 
    return str.replace(regex, tgt);
}

测试案例：

let txt= "The 'great' idea of today ";
let word = "'great'";
let out = replaceWord(txt,word,"|test|");
console.log(out);

实际输出与原字符串一致，期望输出：

The |test| idea of today

问题原因 #

原函数使用的\b是正则中的单词边界，它仅匹配\w（字母、数字、下划线）与非\w字符之间的位置，或字符串首尾与\w的边界。当目标字符串（如'great'）包含非\w字符时，\b的匹配逻辑会失效：比如'属于非\w，原字符串中'前是空格（同样非\w），两者之间不存在单词边界，导致正则无法匹配到目标内容。

修正方案 #

需要做两处关键修改：

1. 转义目标字符串中的正则特殊字符：避免src中的.、*、(等字符被当作正则语法解析。
2. 使用自定义的非单词边界断言：用(?<!\w)（负向后行断言，匹配前面不是单词字符的位置）和(?!\w)（负向前瞻断言，匹配后面不是单词字符的位置）替代\b，同时兼容字符串首尾的情况。

修正后的函数：

var replaceWord = function(str, src, tgt) {
    // 转义正则特殊字符
    const escapedSrc = src.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // 构造自定义边界的正则：匹配前后非单词字符或字符串首尾的目标内容
    const regex = new RegExp(`(?<!\\w)${escapedSrc}(?!\\w)`, 'g');
    return str.replace(regex, tgt);
}

测试验证 #

运行原测试案例：

let txt= "The 'great' idea of today ";
let word = "'great'";
let out = replaceWord(txt,word,"|test|");
console.log(out); // 输出：The |test| idea of today

该函数现在可以正确匹配包含非字母字符的完整目标串，同时也能处理普通单词的替换场景。

内容的提问来源于stack exchange，提问作者Patrick