15

我有一个设置了属性 contentEditable 的 div。

这使我可以拥有一个自由格式的可编辑文本区域，而无需任何表单输入字段：http: //jsfiddle.net/M8wx9/8/

但是，当我创建几行新行并单击保存按钮时，我.text()会使用继续删除我刚刚输入的换行符的方法来获取内容。如果可能的话，我需要维护换行符并将内容作为纯文本存储在数据库中。

.html()我可以通过使用而不是将 HTML 直接存储到数据库中，.text()但我不喜欢这个想法，因为我将来可能需要将这些数据提取为纯文本。此外，在 Firefox 中按 enter 会换行<br>，Chrome 和 Safari 会换行，<div>...</div>而 Internet Explorer 和 Opera 使用段落<p>...</p>换行，因此解析 html 听起来并不容易。

如何保留这些换行符并将内容作为纯文本存储在数据库中（类似于 textarea 的方式）？

最好的问候， ns

4

2 回答 2

24

jQuery 使用textContenton aNode返回元素的文本值，这将压缩空白。如果要维护换行符，则需要使用innerTextwhich 表示直接访问元素而不是通过 jQuery。

从你的jsfiddle：

console.log($(Comments)[0].innerText);

http://jsfiddle.net/M8wx9/10/

==== 更新：
作为一个警告（正如 Tim Down 指出的那样），使用innerText仅适用于 webkit 和 microsoft 浏览器。如果您的应用程序还支持 Firefox，则需要在 innerHTML 上使用正则表达式以保持换行符。举个例子：

$(Comments).html().trim()
.replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
.replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
.replace(/(<([^>]+)>)/ig, "");   // remove any remaining tags

http://jsfiddle.net/M8wx9/12/

正如评论中提到的，前一个在 Chrome 中不起作用。这是一个有效的解决方案：

$(Comments).html().trim()
.replace(/<br\s*\/*>/ig, '\n') 
.replace(/(<(p|div))/ig, '\n$1') 
.replace(/(<([^>]+)>)/ig, "");

http://jsfiddle.net/M8wx9/81/

于 2012-12-07T13:36:11.510 回答
1 
function readContentWithBreaks(elem){
  if(elem[0].innerText){
    return elem[0].innerText.replace(/\n/ig,"<br>");
  }else{
    return elem.html();
  }
}

由于 webkit 浏览器支持 innerText 我决定检测他们添加的 /n 交换。对于 Firefox，它已经提供了内容，<br>所以我们可以按原样处理。

于 2014-07-09T22:13:11.230 回答