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属性。 这似乎是一个好主意:它在显示期间节省了一点时间,因为如果内存中表示已经规范化,那么浏览器无需在需要显示文本时进行规范化。
但是,规范化规则也有例外。 值得注意的是,这些是
元素,在CSS感知浏览器中,这些元素具有任何值,但对于white-space属性是正常的。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中的正确位置会很痛苦。
希望这有助于一些人:)