我有一个 div 设置为contentEditable
" white-space:pre
"并设置样式,所以它保留了换行符之类的东西。在 Safari、FF 和 IE 中,div 的外观和工作原理几乎相同。一切都很好。我想要做的是从这个 div 中提取文本,但不会丢失格式——特别是换行符。
我们正在使用 jQuery,它的text()
功能基本上是做一个预排序的 DFS,并将 DOM 的那个分支中的所有内容粘合在一起成为一个单一的块。这会丢失格式。
我查看了该html()
函数,但似乎所有三个浏览器都对在我的contentEditable
div 中在幕后生成的实际 HTML 执行不同的操作。假设我在我的 div 中输入:
1
2
3
这些是结果:
野生动物园 4:
1
<div>2</div>
<div>3</div>
火狐 3.6:
1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">
IE 8:
<P>1</P><P>2</P><P>3</P>
啊。这里没有什么非常一致的。令人惊讶的是,MSIE 看起来是最理智的!(大写的 P 标签和所有)
div 将动态设置样式(字体、颜色、大小和对齐方式),这是使用 CSS 完成的,所以我不确定是否可以使用pre
标签(在我使用 Google 找到的某些页面上提到过)。
有谁知道任何 JavaScript 代码和/或 jQuery 插件或一些可以从 contentEditable div 中提取文本以保留换行符的东西?如果不需要,我宁愿不重新发明解析轮。
更新:我getText
从 jQuery 1.4.2 中提取了该函数并对其进行了修改,以使用大部分完整的空格提取它(我只在添加换行符的地方更改了一行);
function extractTextWithWhitespace( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
ret += elem.nodeValue + "\n";
// Traverse everything else, except comment nodes
} else if ( elem.nodeType !== 8 ) {
ret += extractTextWithWhitespace2( elem.childNodes );
}
}
return ret;
}
我调用此函数并使用其输出将其分配给带有 jQuery 的 XML 节点,例如:
var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);
生成的 XML 最终通过 AJAX 调用发送到服务器。
这在 Safari 和 Firefox 中运行良好。
在 IE 上,只有第一个 '\n' 似乎以某种方式被保留。进一步研究它,看起来 jQuery 正在像这样设置文本(jQuery-1.4.2.js 的第 4004 行):
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
继续阅读createTextNode
,似乎 IE 的实现可能会混淆空白。这是真的还是我做错了什么?