BR的innerText中的额外换行符，后接DIV

Question

如果我的DIV包含包含BR的子代，后跟DIV，则innerText值似乎有多余的换行符。此外，如果我然后设置div.innerText = div.innerText，则多余的换行符将出现在以前没有的地方！

我正在使用Chrome。我没有尝试使用其他浏览器。

例如，下面的HTML：

<div id=div>
  <span>abc</span>
  <br>
  <div>def</div>
</div>

按预期显示以下内容。注意两行之间没有空格：

但是，如果我随后执行以下javascript：

div.innerText = div.innerText;

它意外插入了一个空白换行符！

这里是一个例子：

https://jsfiddle.net/aexpbruo/1/

这是错误还是功能？有什么办法可以摆脱这种行为？

之所以要避免这个问题，是因为我想将所有DIV子级折叠到单个文本节点中，但又不更改（或至少不希望更改）div中的实际文本内容。避免在DIV中避免使用DIV和BR元素。

Answer 1

这似乎是设计使然。

您可以将多余的行折叠成一个换行符

function read(element) {
  return element.innerText.replace(/\n+\s*\n+/g, "\n")
}

或将所有多余的空格折叠为一个空格

function read(element) {
  return element.innerText.replace(/\s+/g, " ")
}