JavaScript按顺序替换字符串重复词汇为对应不同超链接的问题

原有实现出现a标签嵌套、替换错位的核心原因是：

• 循环中每次执行replace都是从修改后的字符串头部开始匹配
• 第一次把第一个dashboard替换为a标签后，标签内部的文本仍然是dashboard，第二次循环匹配时会优先命中这个已经被包裹在a标签内的文本，重复套标签导致嵌套
• 原字符串中第二个真正的待替换dashboard因为位置靠后，始终没有被匹配到

通过记录查找起始位置的方式，每次只在未处理的字符串片段中匹配目标词汇，从根源避免触碰已经替换完成的a标签内容，代码如下：

var string = "Please click on dashboard and then open the dashboard details to verify your details on the data";
var stringArray = ["dashboard" , "dashboard" , "data"];
var replaceArray = ["https://abcd.com/login" , "https://abcd.com/home" , "https://abcd.com/data"];

// 记录下一次匹配的起始位置，初始从字符串开头开始
var searchOffset = 0;
for(var i = 0; i < stringArray.length; i++){
    var target = stringArray[i].trim();
    var url = replaceArray[i].trim();
    var replacement = "<a href='"+url+"'>"+target+"</a>";
    
    // 从指定偏移位置开始查找第一个匹配的目标词汇
    var matchPos = string.indexOf(target, searchOffset);
    if(matchPos === -1) continue;

    // 拼接替换后的字符串
    string = string.slice(0, matchPos) + replacement + string.slice(matchPos + target.length);
    // 更新匹配偏移位置到本次插入内容的末尾，后续匹配跳过已处理区域
    searchOffset = matchPos + replacement.length;
}

运行上述代码即可得到期望输出：

Please click on <a href='https://abcd.com/login'>dashboard</a> and then open the <a href='https://abcd.com/home'>dashboard</a> details to verify your details on the <a href='https://abcd.com/data'>data</a>

• 全程只维护一份字符串实例，不需要额外做标签内容的转义或排除匹配
• 每次替换完成后直接跳过刚插入的a标签片段，后续匹配只会在还没处理过的原文区域查找，完全不会出现匹配到已替换标签内文本的问题
• 兼容待替换词汇重复出现的场景，严格按照stringArray的顺序对应原文中词汇出现的先后顺序完成替换

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