Javascript 如何从div中获取所有子文本并用空格分隔？

假设我有这个：

<div id ="element">
    <span>Hey</span>
    <div>
         <span>What up?</spa>
    </div>
    Yeah more text here.
</div>

我试过：

var text = document.getElementById("element").textContent;

但这让所有的词都像一团

'HeyWhat up?Yeah more text here.'

---

注意，子元素的数量是动态的，可能只有5个或100个。

您可以递归地循环所有子节点以查找文本节点

const div=document.querySelector（“元素”）；
常量文本=[]；
div.childNodes.forEach（函数检查（子）{
if（child.nodeType===Node.TEXT\u节点）{
text.push（child.nodeValue.trim（））；
}
childNodes.forEach（检查）；
});
console.log（text.join（“”））

嘿
怎么了？
是的，这里有更多的文字。
您可以递归遍历所有子节点以查找文本节点


const div=document.querySelector（“元素”）；
常量文本=[]；
div.childNodes.forEach（函数检查（子）{
if（child.nodeType===Node.TEXT\u节点）{
text.push（child.nodeValue.trim（））；
}
childNodes.forEach（检查）；
});
console.log（text.join（“”））

嘿
怎么了？
是的，这里有更多的文字。

const text=document.querySelector（“#元素”）.textContent.replace（/\s+/g，”）.trim（）；
console.log（文本）

嘿
怎么了？
是的，这里有更多的文字。
这很好
一个
!


const text=document.querySelector（“#元素”）.textContent.replace（/\s+/g，”）.trim（）；
console.log（文本）

嘿
怎么了？
是的，这里有更多的文字。
这很好
一个
!

为什么您决定对
[…div.childNodes]
和
[…child.childNodes]
使用扩展运算符进行浅层复制？@RobertCooper必须将其转换为数组，以便可以使用
forEach
。这里似乎没有浅层复制就可以工作：@RobertCooper谢谢通知我
NodeList.forEach
并不总是受支持。为什么您决定对
[…div.childNodes]
和
[…child.childNodes]使用扩展运算符进行浅复制
？@RobertCooper有必要将其转换为数组，以便可以使用
forEach
。它似乎在没有浅层副本的情况下工作：@RobertCooper谢谢通知我
NodeList.forEach
并不总是受支持的。使用
.textContent
应该也会为您提供所有空间。这是实际的HTML还是压缩为空格？使用
.textContent
应该也能提供所有的空格。这是实际的HTML还是压缩为空格？
'HeyWhat up?Yeah more text here.'