javascript - 使用div contentEditable insideText 和innerHTML 都没有往返于数据库的换行符

Question

我使用 div 供人们输入文本，然后我尝试保存

div.innerText

和

div.innerHTML

到我的数据库，但是当我将其从数据库带回并将其放回 div 时，所有回车符或换行符都消失了

innerHTML 到数据库

a

b

c

    //in database like this  <div>a</div><div></div><div>b</div><div></div><div>c</div>

内部文本到数据库

a
a
a
a
a
a
    //how it stored in database  aaaaaa

如果您能告诉我如何处理这种情况，我将不胜感激，非常感谢您的宝贵时间

Answer 1

div.innerHTML使用 <div> 创建新行的 HTML 输出容器。因此换行符将被“替换”。

div.innerText使用“隐形”字符\n或\r\n标记新行，它们可能不会显示在您的数据库中。但是，您可以将它们替换为 <br>标签以查看它们是否存在。

document.getElementById("output").addEventListener("click", function() {
  console.log("HTML:");
  console.log(document.getElementById("text").innerHTML);
  console.log("Text:");
  var text = document.getElementById("text").innerText;
  console.log(text.replace(/(?:\r\n|\r|\n)/g, '<br>'));
});

#text {
  background-color:#FAFAFA;
  border: red solid 1px;
  height:150px;
  width: 200px;
}

<button id="output">
  Show in console
</button>

<div id="text" contenteditable>

</div>

console.log(text.replace(/(?:\r\n|\r|\n)/g, '<br>'));将所有不同类型的可能的新行替换为 <br>标签。