JS .replace()匹配含反引号内容时重复包裹span标签问题求助

• 你传给.replace()的第一个参数是反引号包裹的字符串，不是真正的正则表达式对象：写在字符串里的/g、括号分组都不会被解析成正则语法，相当于你在查找页面中完全等于/(xxx)/g的文本，根本匹配不到目标内容
• 待匹配内容如果包含反引号、括号、星号、点号这类正则特殊字符，直接拼接进正则规则会导致匹配失效、甚至报语法错误，必须先对这类字符做转义处理
• 直接全量替换HTML时，之前已经被<span>包裹的目标文本会被再次命中，导致标签层层嵌套，最多叠6次是因为循环/重绘触发了多次替换逻辑

直接用下面的jQuery代码替换原有逻辑即可，兼容包含反引号的匹配内容，且只会给目标文本包裹一次span标签：

// 正则特殊字符转义工具，覆盖反引号等所有正则保留符号
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\`]/g, '\\$&');

$("#pstad-descrptn-mirror div").each(function () {
  const $this = $(this);
  const textContent = $this.text();
  const targetStore = textContent.split(", and comes with")[0].split("located in ")[1];
  // 未匹配到目标内容直接跳过
  if (!targetStore) return;

  // 构造真正的正则实例，开启全局匹配
  const matchReg = new RegExp(escapeRegExp(targetStore), 'g');
  
  $this.html(function (_, oldHtml) {
    // 先清除已存在的同规则span包裹，从根源避免重复嵌套
    const cleanHtml = oldHtml.replace(new RegExp(`<span>(${escapeRegExp(targetStore)})</span>`, 'g'), '$1');
    // 执行全局替换，$&直接引用匹配到的原文，避免转义偏差
    return cleanHtml.replace(matchReg, '<span>$&</span>');
  });
});

如果需要原生JS版本，逻辑完全一致：

const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\`]/g, '\\$&');
document.querySelectorAll("#pstad-descrptn-mirror div").forEach(el => {
  const textContent = el.textContent;
  const targetStore = textContent.split(", and comes with")[0].split("located in ")[1];
  if (!targetStore) return;
  const matchReg = new RegExp(escapeRegExp(targetStore), 'g');
  const wrapReg = new RegExp(`<span>(${escapeRegExp(targetStore)})</span>`, 'g');
  el.innerHTML = el.innerHTML.replace(wrapReg, '$1').replace(matchReg, '<span>$&</span>');
});

• 动态生成正则时不要把规则写在引号/反引号里，必须用new RegExp(匹配规则字符串, 匹配标志)创建真正的正则实例
• 所有动态插入正则的字符串内容，必须先转义正则特殊字符，反引号`本身属于正则特殊字符，必须加入转义列表
• 替换前先清理已存在的同规则包裹标签，是解决重复嵌套最稳妥的方案

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