使用Javascript获取除其子元素外的DOM元素的所有文本内容

Get all text contents of a DOM element outside its children using Javascript

本文关键字：元素 DOM 文本 获取 Javascript 使用      更新时间：2023-09-26

我有一个DOM元素，它有一些由文本字符串交错的子元素。我想得到每个这些文本字符串，并使用正则表达式替换它们。例如:

<div>Text started.
<a>Link child inside</a>
Some more text. 
<u>Another child</u>
Closing text.</div>

在这个例子中，我想提取字符串"Text started."，"Some more Text ."answers"Closing Text ."，这样我就可以稍后用其他内容替换它们。

解决方案应该是通用的，因为父节点中的子节点数量可以变化，节点类型也可以变化。

谁有一个聪明的答案来实现这很容易使用javascript?

可以使用childNodes来检查nodeType是否为文本节点。在forEach中这样做，你可以很容易地用任何你想要的替换文本。

的例子:

var div = document.getElementsByTagName('div').item(0);
[].slice.call(div.childNodes).forEach(function(node , i) {
  if(node.nodeType === 3) {
    var currNode = div.childNodes[i];
    var currText = div.childNodes[i].textContent;
    currNode.textContent = currText.replace(/text/i, ' Foo');
  }
})
<div>
  Text started.
  <a>Link child inside</a>
  Some more text. 
  <u>Another child</u>
  Closing text.
</div>

您可以这样做;

var textNodes = [...test.childNodes].filter(child => child.nodeType === Node.TEXT_NODE)
textNodes.forEach(tn => console.log(tn.textContent))
<div id="test">Text started.
<a>Link child inside</a>
Some more text. 
<u>Another child</u>
Closing text.</div>

相关文章：