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

我有一个属性为contentEditable集的div

这允许我拥有一个自由格式的可编辑文本区域，而不需要任何表单输入字段：

但是，当我创建几行新行并单击“保存”按钮时，我会使用

.text（）

方法获取内容，该方法将删除我刚才输入的换行符。如果可能的话，我需要维护换行符，并将内容作为纯文本存储在数据库中

我可以使用

.HTML（）

而不是

.text（）

将HTML直接存储到数据库中，但我不喜欢这种想法，因为我将来可能需要将此数据提取为纯文本。此外，在Firefox中按enter键会用

分隔新行，Chrome和Safari会用

..

分隔新行，而Internet Explorer和Opera会用段落

..

分隔新行，因此解析html听起来并不容易

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

致以最良好的祝愿，

---

ns

这听起来太简单了，所以我在给出这个答案时有些犹豫，但是从我运行的一个快速测试来看，以下应该可以很好地工作（至少在chrome中）：

$（“.post text”）.text（）.replace（/\n/g，“
”）

但是，您必须从单独的p或div标记开始，因此后跟段落元素的文本节点将不会生成换行字符

---

还有一双鞋。尽管如此，正如您已经提到的，contentEditable在跨浏览器方面并不是非常一致的。。。因此，真正使用现有编辑器可能是个好主意。

jQuery使用

节点上的
textContent
返回元素的文本值，这将压缩空白。如果希望保留换行符，则需要使用
innerText
，这意味着直接访问元素，而不是通过jQuery

从您的JSFIDLE：

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


==更新：

作为一个警告（正如Tim Down所指出的），使用
innerText
只能在webkit和microsoft浏览器中使用。如果您的应用程序也支持Firefox，则需要在innerHTML上使用正则表达式来维护换行符。例如：


$（Comments.html（）.trim（））
.replace（//ig，'\n'）//替换单行换行符
.替换（/）/ig，“”；//删除所有剩余的标签



正如评论中提到的，之前的版本在Chrome中不起作用。以下是一个可行的解决方案：

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

$（Comments.html（）.trim（））
.replace（//ig，“\n”）
.替换（/（）/ig，”）；

函数readContentWithBreaks（elem）{
if（元素[0].innerText）{
返回元素[0]。innerText.replace（/\n/ig，“
”）；
}否则{
返回elem.html（）；
}
}

因为webkit浏览器支持innerText，所以我决定检测它们添加的/n。
对于Firefox，它已经提供了带有

的内容，因此我们可以照原样处理
 非常感谢你。这让我整个上午都很沮丧。现在，当我使用PHP显示内容时，我需要执行以下操作以将换行符转换回

元素：
$sanitized=htmlspecialchars（$comments，entu QUOTES）$comments=str_replace（数组（“\r\n”、“\n”）、数组（“
”、“
”）、$sanitized）
PHP有一个内置的添加换行符的方法：
nl2br
，因此您可以执行
$sanitized=nl2br（htmlspecialchars（$comments，entu QUOTES））php.net/manual/en/function.nl2br.phpThanks。我真的很感激
innerText
根本不可靠，原因有几个：首先，在撰写本文时，Firefox直到当前版本（17.0.1）都不支持它。其次，在Opera中，它只是
textContent
的别名。第三，它没有规范，所以不知道未来的浏览器如何实现它。不幸的是，这个正则表达式不起作用。括号而不是括号，并且出于未知原因，$0在Chrome中没有引用匹配的字符串。下面应该可以使用
$（Comments.html（）.trim（）.replace（//ig，“\n”）.replace（//（）/ig，”）可能会添加一些注释，这样机器人就不会抓到你了。
$(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

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

function readContentWithBreaks(elem){
  if(elem[0].innerText){
    return elem[0].innerText.replace(/\n/ig,"<br>");
  }else{
    return elem.html();
  }
}