Question

在脚本中，我有这行：

var ReplacingScope = document.querySelector( "body" );
let Regexp = new RegExp("fdp", 'gi');
ReplacingScope.innerText = ReplacingScope.innerText.replace( Regexp,"pdf");

它可以满足我的要求，那就是将所有 fdp 事件替换为 pdf ，但同时也删除了html标签。例如，我希望它这样做：

<body>
<div id="test">fdp</div>
</body>

成为

<body>
<div id="test">pdf</div>
</body>

我不想使用innerHTML属性，因为它可能会产生错误，更改节点ID，类等。有没有一种方法可以在保留所有html标签的同时仅编辑正文文本？谢谢

Answer 1

据我所知，在维护DOM树的同时，不可能一次性进行这样的查找和替换。

一种解决方案是手动遍历DOM并在每个文本节点中进行文本替换，但这不适用于匹配跨越多个节点的文本。

function replace() {
  const regex = /is|am|123456/gi;
  const el = document.querySelector('#box');
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    node.nodeValue = node.nodeValue.replace(regex, '***');
  }
}

<button onclick="replace()">Replace</button>

<div id="box">
  <p>This is some <strong>sample</strong> text.</p>
  <p>123456 123<strong>456</strong> <em>123456</em></p>
</div>

Answer 2

我建议使用此功能来实现您想要的目标：

var ReplacingScope = document.getElementById("test");
let Regexp = new RegExp("fdp", 'gi');
ReplacingScope.innerText = ReplacingScope.innerText.replace( Regexp,"pdf");

我可以在不更改html标签的情况下编辑正文的innerText吗？

2 个答案: