【发布时间】：2011-03-28 05:20:56
【问题描述】：
我有一个 div 设置为 contentEditable 并使用“white-space:pre”设置样式，因此它保留了换行符之类的内容。在 Safari、FF 和 IE 中，div 的外观和工作方式几乎相同。一切都很好。我想要做的是从这个 div 中提取文本，但不会丢失格式——特别是换行符。
我们使用的是 jQuery，它的text() 函数基本上是进行预排序 DFS 并将 DOM 分支中的所有内容粘合到一个块中。这会丢失格式。
我查看了html() 函数，但似乎所有三个浏览器对在我的contentEditable div 中在幕后生成的实际HTML 执行不同的操作。假设我在我的 div 中输入这个：
1
2
3
这些是结果：
Safari 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 中提取文本以保留换行符的东西？我不想重新发明解析轮子，如果我不需要的话。
更新：我抄袭了 jQuery 1.4.2 中的 getText 函数，并对其进行了修改以将其提取为几乎完整的空白（我只更改了添加换行符的一行）；
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 的实现可能会混搭空白。这是真的还是我做错了什么？
【问题讨论】：
-
有趣的是，IE 表现得最清醒也就不足为奇了：contentEditable 最初是 IE 专有的；它从 5.5 开始就在 IE 中，所以我猜他们有最多的时间让它运行良好。
标签： javascript jquery html css contenteditable