是否有一个 javascript 函数仅用于索引 div 中的文本内容（而不是原始代码）？答案

【问题标题】：Is there a javascript function for indexing only the textcontent (as opposed to raw code) within in a div?是否有一个 javascript 函数仅用于索引 div 中的文本内容（而不是原始代码）？
【发布时间】：2020-09-26 00:30:12
【问题描述】：

我在一个用换行符分隔的 div 中有一些文本，例如：

<div id="myDiv">abcd<br>hij<br>klmnop</div>

问题是document.getElementById("myDiv").innerHTML.slice(0,5) 返回abcd<，但我需要它返回"abcd "。我正在尝试获取一个子字符串来维护换行符，但将它们视为单个索引而不是   的四个不同字符。

我可以编写一个读取整个字符串的函数，将 的所有实例替换为单个字符串，例如@，然后使用slice()函数获取我需要的子字符串，最后替换@ 和   的所有实例。但是有没有更有效的方法呢？

【问题讨论】：

不，document.getElementById("myDiv").value 将返回 undefined。
@Pointy 谢谢！我编辑了问题说document.getElementById("myDiv").innerHTML
最好使用substr(start,length)函数。 document.getElementById("myDiv").innerHTML.substr(0,5)
我会为此使用正则表达式
我认为你在最后一段中描述它的方式是理想的。 document.getElementById("myDiv").innerHTML.replace(/ /g, "\n").substr(0, 5).replace(/\n/g, " ")。它看起来很冗长，但它可以满足您的需求。

标签： javascript html text slice

【解决方案1】：

匹配所有在字符串末尾或末尾带有  的字符串。

console.log(
document.getElementById("myDiv").innerHTML.match(/(.*?<br>|.+?$)/g)
)

&lt;div id="myDiv"&gt;abcd&lt;br&gt;hij&lt;br&gt;klmnop&lt;/div&gt;

另一种选择是遍历childNodes并提取文本节点并处理其他dom元素。我创建了一个简单的 childNodes 映射，它提取了 wholeText（用于文本节点）或 HTML。

console.log(
[...document.getElementById("myDiv").childNodes].map(x=>x.wholeText||x.outerHTML)
)

&lt;div id="myDiv"&gt;abcd&lt;br&gt;hij&lt;br&gt;klmnop&lt;/div&gt;

【讨论】：