javascript - JS/Jquery 替换内部文本而不破坏事件

Question

这是 html:

<div id="div001">
  This is ${Row.1}.
  <p>${Row.2} explain something else.</p>
  <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p>
</div>

我想要做的是替换 ${Row.1}到文本Row 1无需替换整个div001 DIV。因为这会破坏 <p> 上的事件& <span> .

我目前能够实现遍历所有元素并找到子节点(其中没有html标签)，在本例中是第一个<p> & <span> ，并将该单词替换为 JQUERY $(ele).text() .

但我仍然找不到替换 ${Row.1} 和 ${Row.3} 的方法。

请大家多多指教，谢谢。

Answer 1

您可以创建一个递归函数来迭代所有子节点，如果它们是文本节点，则替换它们的文本 - 如果它们是元素节点，则递归地调用它们的函数:

function replaceTextNodes(elm) {
  elm.childNodes.forEach((node) => {
    if (node.nodeType === 3) {
      // Text node:
      node.textContent = node.textContent.replace(/\${([^}]+)}/g, '$1');
    } else if (node.nodeType === 1) {
      // Element node, recurse:
      replaceTextNodes(node);
    }
  });
}
replaceTextNodes(document.querySelector('#div001'));

<div id="div001">
  This is ${Row.1}.
  <p>${Row.2} explain something else.</p>
  <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p>
</div>