Javascript 使用适当的空白从HTML获取文本

使用jQuery方法很容易从HTML中提取文本

$("<p>This <b>That</b> Other</p>").text() == "This That Other"

$（“This-That-Other
”）.text（）=“This-That-Other”

但是如果单词/元素之间没有空格，那么文本将被连接起来

$("<p>This <b>That</b><br/>Other</p>").text() == "This ThatOther"
Desired: "This That Other"

$("<div><h1>Title</h1><p>Text</p></div>").text() == "TitleText"
Desired: "Title Text"

$（“这个那个
其他的
”）。text（）=“这个那个其他”
渴望：“这另一个”
$（“TitleText
”）.Text（）=“TitleText”
所需：“标题文本”

---

是否有任何方法可以从HTML中获取所有文本（使用

.text（）

或其他方法），这意味着上面的示例可以根据需要生成？

如果您只是担心br标记，可以用文本节点替换它们

var elem=document.querySelector（“#text”）
var clone=elem.cloneNode（真）
clone.querySelectorAll（“br”）.forEach（函数（br）{
var space=document.createTextNode（“”）
br.替换为（空格）
})
var cleanedText=clone.textContent.trim（）.replace（/\s+/，“”）；
console.log（cleanedText）

这是另一个

如果您只是担心br标记，可以用文本节点替换它们

var elem=document.querySelector（“#text”）
var clone=elem.cloneNode（真）
clone.querySelectorAll（“br”）.forEach（函数（br）{
var space=document.createTextNode（“”）
br.替换为（空格）
})
var cleanedText=clone.textContent.trim（）.replace（/\s+/，“”）；
console.log（cleanedText）

这是另一个

您可以遍历DOM树，查找节点类型为

3

（文本节点）的节点。找到一个后，将其添加到数组中。如果找到非文本节点，可以将其传递回函数以继续查找

函数innerText（元素）{
函数getTextLoop（元素）{
常量文本=[]；
Array.from（element.childNodes）.forEach（node=>{
if（node.nodeType==3）{
text.push（node.textContent.trim（））；
}否则{
push（…getTextLoop（node））；
}
});
返回文本；
}
返回getTextLoop（元素）.join（“”）；
}
/*例子*/
const div=document.createElement（'div'）；
div.innerHTML=`This-That
Other
`；
log（innerText（div））；
const div2=document.createElement（'div'）；
div2.innerHTML=`TitleText
`；
log（innerText（div2））

您可以遍历DOM树，查找节点类型为

3

（文本节点）的节点。找到一个后，将其添加到数组中。如果找到非文本节点，可以将其传递回函数以继续查找

函数innerText（元素）{
函数getTextLoop（元素）{
常量文本=[]；
Array.from（element.childNodes）.forEach（node=>{
if（node.nodeType==3）{
text.push（node.textContent.trim（））；
}否则{
push（…getTextLoop（node））；
}
});
返回文本；
}
返回getTextLoop（元素）.join（“”）；
}
/*例子*/
const div=document.createElement（'div'）；
div.innerHTML=`This-That
Other
`；
log（innerText（div））；
const div2=document.createElement（'div'）；
div2.innerHTML=`TitleText
`；
log（innerText（div2））是否希望每个元素之间至少有一个空格？@Shawn-只需要一些空格。。。数量无关紧要如果用IDE格式化程序格式化HTML怎么办？或者您可以将HTML代码读入字符串，然后使用HTML格式化程序库？是否希望每个元素之间至少有一个空格？@Shawn-只需要一些空格。。。数量无关紧要如果用IDE格式化程序格式化HTML怎么办？或者您可以将HTML代码读入字符串，然后使用HTML格式化程序库？它不仅仅是

标记。。。这是任何元素“连接”的地方。。。例如我添加的额外示例：
TitleText
。Sarvesh让我想到了对子对象的递归可能是实现gobasic tree walkerIt的方法，而不仅仅是

标记。。。这是任何元素“连接”的地方。。。例如我添加的额外示例：
TitleText
。Sarvesh让我想到对孩子的递归可能是实现gobasic tree Walker的方法我们有一个赢家。。。这正是我需要的。是在试图写类似的东西，但你有更快的一个更好的代码位。谢谢，我们有个赢家。。。这正是我需要的。是在试图写类似的东西，但你有更快的一个更好的代码位。谢谢