我有一个 div 设置contentEditable
并使用“”设置样式,white-space:pre
因此它保留了换行符之类的东西。在 Safari、FF 和 IE 中,div 的外观和工作方式几乎相同。一切都很好。我想要做的是从这个 div 中提取文本,但不会丢失格式——特别是换行符。
我们使用的是 jQuery,它的text()
功能基本上是进行预排序 DFS,并将 DOM 分支中的所有内容粘合到一个块中。这会丢失格式。
我查看了该函数,但似乎所有三个浏览器都使用在我的divhtml()
幕后生成的实际 HTML 执行不同的操作。contentEditable
假设我在我的 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">
即 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 的实现可能会混搭空白。这是真的还是我做错了什么?