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

我正在做:

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

在这样的事情上:

 
<div> Some text <div>

为何逃脱内容? 因为它有时会出现格式错误,我不希望它干扰或破坏文档的其余部分。

在FF中它显示保留换行符。 在IE7中它没有。 我需要保留白色空间。 这个内容实际上是在textarea进行编辑。

在任何人推荐富文本编辑器之前,这段代码实际上并不是HTML。 这是一种习惯的方言。

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

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

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

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

Internet Explorer将这些转换应用于innerHTML属性。 这似乎是一个好主意:它在显示期间节省了一点时间,因为如果内存中表示已经规范化,那么浏览器无需在需要显示文本时进行规范化。

但是,规范化规则也有例外。 值得注意的是,这些是

Internet Explorer不尊重这些特殊情况。 第三种方法使得优化成为一个坏主意,因为白空间可能会在运行时发生变化,例如通过DOM。 在任何情况下,Internet Explorer都会规范化innerHTML属性的所有赋值,从而导致下面演示的效果。

此文本在页面加载时填充textarea。 这也包含换行符和多个空格。 除了UA可能会断行之外,格式化也会保留在此处。

(重点补充)

事实上,如果我改为:

 
 ... 

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

或者干脆:

  

这一切都神奇地起作用。

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

 #div { white-space: pre; } 

请参阅此处获取解决方法:

黑客是首先使用cloneNode()克隆你想要内容的元素。

接下来,使用createElement()创建


元素,然后将克隆节点附加到其中。

现在您可以获取create


元素的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中的正确位置会很痛苦。

希望这有助于一些人:)