无明显报错的jQuery文本替换脚本失效该如何调试？

优先排查核心常见原因 #

你用到的$.each、:contains选择器、html()回调方法在jQuery 2.1.1版本中均原生支持，版本本身不是直接诱因，大概率是站点环境差异导致的运行时序、变量冲突问题，按以下步骤逐一排查：

• 第一步：清理控制台干扰
  打开浏览器控制台，在筛选栏只勾选「错误」「警告」分类，同时开启「Preserve log（保留日志）」选项，刷新页面后即可过滤掉无关日志，确认是否有脚本报错。
• 第二步：验证DOM加载时序
  你直接插入的脚本如果执行时机早于p#demo元素渲染完成，会导致$("p#demo:contains('xxx')")选择不到任何元素，替换逻辑自然不会生效。而封装在插件中的代码通常默认在DOM加载完成后执行，这是两个站点最核心的差异。
  可以直接在控制台执行console.log($("p#demo").length)，如果返回值为0，就可以确认是时序问题。
  修复方案是把执行逻辑包裹在DOM就绪回调中：

  $(function() {
    // 把你原来的$.each替换逻辑放到这里
    $.each(words, function(index, value) {
      var replacestr = new RegExp('\\b'+value+'\\b', "g");
      $("p#demo:contains('" + value + "')").html(function(_, html) {
        return html.replace(replacestr, ' <span class = "smallcaps" word="' + value + '" onclick="toggle(this)">_______</span>')
      });
    });
  });
  

• 第三步：排查变量与符号冲突
  1. 先在控制台执行console.log(words)，确认数组是否为你定义的词汇列表，避免站点其他代码覆盖了全局words变量
  2. 部分站点会引入其他前端库占用$符号，导致jQuery调用失效，可以把所有$替换为全写jQuery测试，例：jQuery.each(words, ...)、jQuery("p#demo:contains(...)")
• 第四步：验证正则匹配逻辑
  复制p#demo的实际文本内容，在控制台手动执行正则匹配测试，确认站点实际渲染的文本没有特殊字符、大小写差异导致正则匹配失败：

  // 示例测试，替换成你实际的词汇和文本
  const testStr = "你站点p#demo的实际文本内容"
  const reg = new RegExp('\\bvocabulary\\b', "g")
  console.log(testStr.match(reg)) // 有匹配结果说明正则正常
  

优化后的兼容代码参考 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var words = [];
words.push('vocabulary');
words.push('lexicon');
words.push('lexicons');

function toggle(element) {
  if (element.innerHTML.split('_').join('').trim().length === 0) {
    element.innerHTML = element.getAttribute("word");
  } else {
    element.innerHTML = "_______";
  }
}

// 确保DOM加载完成后执行替换逻辑，同时规避$符号冲突
jQuery(function($) {
  $.each(words, function(index, value) {
    var replacestr = new RegExp('\\b'+value+'\\b', "g");
    $("p#demo:contains('" + value + "')").html(function(_, html) {
      return html.replace(replacestr, ' <span class="smallcaps" word="' + value + '" onclick="toggle(this)">_______</span>')
    });
  });
});
</script>

<p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself. In this paragraph, lexicons is a new word that's added, so don't forget to push 'lexicons' in your array.</p>

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