BR 的 innerText 中的额外换行符后跟 DIV

Question

如果我有一个包含子项的 DIV，包括一个 BR 后跟一个 DIV，则 innerText 值似乎有一个无关的换行符。此外，如果我随后设置div.innerText = div.innerText，额外的换行符会出现在之前没有出现的地方！

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

这是错误还是功能？我肯定无法想象这是设计使然的任何原因。无论如何，有没有办法摆脱这种行为？

我试图避免这种行为的原因是我想将所有 DIV 子节点折叠到一个文本节点中，但不更改（或至少看起来不更改）div 中的实际文本内容.避免 DIV 中的 DIV 和 BR 元素不是一种选择。

到目前为止，我发现能够在不更改换行符的情况下将 innerText 重新分配回 div.innerText 的唯一方法是创建我自己的 getInnerText() 函数，该函数遍历节点树以查找所有 BR和 TEXT_NODE 节点，同时构建一个自定义的 innerText ，在该元素紧接在 BR 之前的情况下，一直跳过 DIV 元素的换行符。它有效，但感觉应该有一个更简单的解决方案。

示例 1

如预期的那样，以下示例最初显示以下内容。注意两行之间没有空格：

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

div.innerText = div.innerText;

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

window.setTimeout(function() {
  alert('Click ok to run\n  div.innerText = div.innerText\nwhich will unexpectedly insert an extra newline!');
  div.innerText = div.innerText;
}, 1500);

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

示例 2

这是一个更复杂的示例，包括 2 个换行符（需要）的块，它更改为 3 个换行符（不需要）的块。以下是它的显示方式（正确）：

在将 innerText 设置为自身后，它错误地更改为以下内容：

window.setTimeout(function() {
  alert('Click ok to run\n  div.innerText = div.innerText\nwhich will unexpectedly insert two extra newlines!');
  div.innerText = div.innerText;
}, 1500);

<div id=div style="white-space:pre"><span>abc</span><br><div><span>   def</span><br><br><div>ghi</div.</div></div>

Answer 1

这似乎是设计使然。

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

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

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

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