contentEditable字段,用于在数据库输入时维护换行符

Question

我有一个div属性contentEditable设置.

这允许我有一个自由格式的可编辑textarea,而不需要任何表单输入字段:http://jsfiddle.net/M8wx9/8/

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

我可以使用.html()而不是直接将HTML存储到数据库,.text()但我不喜欢这个想法,因为我可能需要将此数据提取为未来的纯文本.此外,在Firefox中按Enter键打破了新的界限<br>,Chrome和Safari正在打破,<div>...</div>而Internet Explorer和Opera正在使用<p>...</p>新的行段落,因此能够解析html听起来并不容易.

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

最诚挚的问候, ns

Answer 1

jQuery使用textContenta Node来返回元素的文本值,这将压缩空白区域.如果你想要维护换行符,你需要使用innerText这意味着直接访问元素而不是通过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/