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

【问题标题】：jQuery text() call preserves newlines in Firefox but not in IEjQuery text() 调用在 Firefox 中保留换行符，但在 IE 中不保留
【发布时间】：2009-03-18 14:03:58
【问题描述】：

我在做：

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

关于这样的事情：

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

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

在 FF 中，它显示保留换行符。在 IE7 中它没有。我需要保留空白。此内容实际上是在文本区域中进行编辑。

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

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

【问题讨论】：

标签： jquery cross-browser whitespace

【解决方案1】：

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

但是，innerHTML 在 Internet Explorer。

HTML 标准要求内容展示的转变。 各种数量的相邻空白被折叠成一个空间。 这是一件好事 - 就像一个例子，它允许我添加很多此源文件中的换行符不用担心奇怪显示文本中的换行符。

Internet Explorer 应用这些分配到的转换 innerHTML 属性。这似乎是一个好主意：节省一点时间在显示过程中，因为如果内存中的表示已经标准化，则浏览器不会必须在需要时进行标准化显示文本。

也有例外不过，规范化规则。尤其，这些是元素， <pre> 元素，并且在 CSS 感知中浏览器，任何值的元素，但 white-space 属性是正常的。</pre>

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>

这一切都很神奇。

【讨论】：

【解决方案2】：

不确定这是否有帮助，但也许你可以试试这个：

#div {
  white-space: pre;
}

【讨论】：

【解决方案3】：

请参阅here 了解解决方法：

hack 是首先克隆元素你想要的内容，使用克隆节点（）。

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

现在你可以得到它的 innerText 创建<pre> 元素，然后删除临时对象。你现在有空白保留文本:)
var cloned = targetElement.cloneNode(true);
var pre = document.createElement("pre");
pre.appendChild(cloned);
var textContent = pre.textContent ?
  pre.textContent : pre.innerText;
delete pre;
delete cloned;
我克隆元素的原因是因为 appendChild() 会拉它脱离了 DOM，这很痛苦重新插回正确位置在 DOM 中。

希望这可以帮助一些人那里:)

【讨论】：