如何从更高层级使用jQuery的contents()获取原始HTML字符串实现标签替换？

问题原因 #

你使用.contents()遍历子节点时，<kbd>会被识别为独立的元素节点，你获取到的是该节点内部的内容，<kbd>标签本身不会出现在你拿到的字符串中，因此字符串替换逻辑无法命中目标。你之前尝试获取高层级元素时丢失内容，是因为你依然用.contents()拆分遍历子节点的逻辑，直接读取元素的innerHTML属性可以拿到包含所有下级标签的完整原始HTML字符串，不会丢失内容。

实现方案 #

方案1：定时器简单实现（适合快速测试） #

根据你提到的1-2秒内容加载完成的特性，直接设置延迟执行即可：

setTimeout(function() {
  // 直接获取article完整的HTML字符串
  let articleHtml = $('article').html();
  // 执行替换，注意你原代码的结束标签替换存在笔误，这里修正为替换为</b>
  articleHtml = articleHtml.replace(/<kbd>/g, ' <b>');
  articleHtml = articleHtml.replace(/<\/kbd>/g, '</b> ');
  // 替换完成后写回DOM
  $('article').html(articleHtml);
}, 2000);

方案2：MutationObserver稳定实现（避免定时器时间不准问题） #

如果动态加载时间不固定，用监听DOM变化的方式更可靠：

// 监听article元素的内容变化
const observer = new MutationObserver(function(mutations) {
  // 确认目标元素已经加载完成再执行替换
  if ($('article kbd').length > 0) {
    let articleHtml = $('article').html();
    articleHtml = articleHtml.replace(/<kbd>/g, ' <b>');
    articleHtml = articleHtml.replace(/<\/kbd>/g, '</b> ');
    $('article').html(articleHtml);
    // 替换完成后停止监听
    observer.disconnect();
  }
});
// 配置监听参数
observer.observe(document.querySelector('article'), {
  childList: true,
  subtree: true
});

注意事项 #

直接替换innerHTML会移除原有元素上绑定的所有事件监听，如果你的内容中有绑定JS交互事件，推荐改用DOM操作直接替换标签，不需要做字符串处理：

// 保留原有事件的替换方案
$('article kbd').each(function() {
  $(this).replaceWith(`<b> ${$(this).html()} </b>`);
});

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