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>

Answer 2

我能想到的最简单的方法是将其包装在<span>中。然后你可以用$('#div001 > span')来定位它：

$('#div001 > span').text('Replaced');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div001">
  <span>This is ${Row.1}.</span>
  <p>${Row.2} explain something else.</p>
  <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p>
</div>

如果您明确想要替换${Row.x}组件，您可以将这些部件包装在具有关联 ID/类的 <span> 标签中，并使用它来定位它们：

$('#one, #three').text('Replaced');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div001">
  This is <span id="one">${Row.1}</span>.
  <p><span id="two">${Row.2}</span> explain something else.</p>
  <p><span id="three">${Row.3}</span> welcome you. <span>${Hello.World}, this is a new world.</span></p>
</div>

<小时 />

如果您无法更改 HTML，最好的办法是使用正则表达式。

以下正则表达式将替换格式${...}中的任何内容：

var element = document.getElementById('div001');
var result = element.innerHTML.replace(/${S+}/gm, "REPLACED");
element.innerHTML = result;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>