jQuery text()调用在Firefox中保留换行符，但不在IE中保留换行符

Question

我在做：

alert($("#div").text());

在这样的情况下：

<div id="div">
&lt;div&gt;
Some text
&lt;div&gt;
</div>

为什么会有转义内容？因为它有时是畸形的，我不希望它干扰或破坏文档的其余部分。

在FF中，它会保留换行符。在IE7中不是这样的，我需要保留空白。这个内容实际上是在一个文本区中进行编辑。

在任何人推荐富文本编辑器之前，这段代码并不是真正的HTML。这是一种定制的方言。

那么如何在IE中保留换行符呢？

Answer 1

看起来这就是我的问题：The Internet Explorer innerHTML Quirk

但是，innerHTML在Internet Explorer中有一个问题。

HTML标准要求对内容的显示进行转换。这是一件好事--作为一个例子，它允许我在这个源文件中添加很多换行符，而不必担心在显示的文本中出现奇怪的换行符。

Internet Explorer在赋值时将这些转换应用于innerHTML属性。这似乎是一个好主意:它在显示期间节省了一点时间，因为如果内存中的表示形式已经标准化，那么浏览器就不必在需要显示文本时进行标准化。

不过，规范化规则也有例外。值得注意的是，这些元素是元素、元素，在支持CSS的浏览器中，这些元素具有任何值，但对于空白属性来说是正常的。

Internet Explorer不考虑这些特殊情况。第三种方法使他们的优化不是一个好主意，因为空白可能会在运行时发生变化，例如通过DOM。在任何情况下，Internet Explorer都会规范化对innerHTML属性的所有赋值，从而产生下面演示的效果。

此文本在页面加载时填充文本区。这也包含换行符和多个空格。这里也保留了格式，只是UA可能会换行。

(已添加强调)

实际上，如果我将其更改为：

<div id="div">
<pre>
...
</pre>
</div>

和

$("#div pre").text()

或者简单地说：

<style type="text/css">
#div { white-space: pre }
</style>

这一切都是神奇的。

Answer 2

不确定这是否会有帮助，但也许你可以尝试一下：

#div {
  white-space: pre;
}

Answer 3

有关解决方法，请参阅here：

的技巧是首先使用cloneNode()克隆您想要其内容的元素。

接下来，使用createElement()创建一个<pre>元素，然后将克隆的节点附加到该元素。

现在，您可以获取创建<pre>元素的innerText，只需删除临时对象。现在您有了保留空格的文本:)

var克隆= targetElement.cloneNode(true)；var pre = document.createElement("pre")；pre.appendChild(克隆)；var textContent = pre.textContent？pre.textContent : pre.innerText；delete pre；删除克隆；

我克隆该元素的原因是因为appendChild()会将其从DOM中拉出，并且在DOM中的正确位置重新插入会很痛苦。

希望这能帮助一些人:)