12

我正在做：

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

在这样的事情上：

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

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

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

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

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

4

3 回答 3

17

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

但是，innerHTML 在 Internet Explorer 中存在问题。

HTML 标准要求对内容的显示进行转换。 所有种类和数量的相邻空格都被折叠成一个空格。这是一件好事——作为一个例子，它允许我在这个源文件中添加很多换行符，而不必担心显示文本中出现奇怪的换行符。

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

不过，规范化规则也有例外。值得注意的是，这些元素是 <textarea> 元素、<pre> 元素，以及在 CSS 感知浏览器中具有任何值但对于 white-space 属性正常的元素。

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>

这一切都神奇地起作用。

于 2009-03-18T01:15:45.343 回答
8

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

#div {
  white-space: pre;
}
于 2009-03-18T01:22:36.450 回答
3

请参阅此处了解解决方法：

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

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

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

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 中的正确位置重新插入会很痛苦。

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

于 2009-03-18T01:32:22.917 回答