contentEditable字段，用於在數據庫輸入時維護換行符

Question

我有一個div屬性contentEditable設置。

這允許我有一個自由格式的可編輯textarea，而不需要任何表單輸入字段： http ： //jsfiddle.net/M8wx9/8/

但是，當我創建幾個新行並單擊“保存”按鈕時，我使用.text()方法獲取內容，該方法繼續刪除我剛剛輸入的換行符。 如果可能的話，我需要維護換行符，並將內容作為純文本存儲在數據庫中。

我可以使用.html()而不是.text()直接將HTML存儲到數據庫中，但我不喜歡這個想法，因為我可能需要將此數據提取為未來的純文本。 此外，按在Firefox中輸入新的突破線， <br> ，Chrome和Safari與突破<div>...</div>和Internet Explorer和Opera使用段落<p>...</p>新行，所以聽起來很難解析html。

如何保留這些換行符並將內容作為純文本存儲在數據庫中（類似於textarea的方式）？

最誠摯的問候， ns

Answer 1

jQuery使用Node上的textContent來返回元素的文本值，這將壓縮空白區域。 如果你想要維護換行符，你需要使用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/

Answer 2

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

由於webkit瀏覽器支持innerText，我決定檢測它們添加的/ n。 對於Firefox，它已經為內容提供了<br>所以我們可以按原樣使用它。

Answer 3

這聽起來太簡單了，所以我對給出這個答案猶豫不決，但是從我跑的快速測試中，以下應該完全正常（至少在chrome中）：

$(".post-text").text().replace(/\n/g,"<br />")

您必須從單獨的p或div標記開始，因此文本節點后跟段落元素將不會生成換行符。

還有一個jsfiddle嘲笑這個。 盡管如此，正如您已經提到的，contentEditable並不是非常跨瀏覽器的一致性......因此，真正使用現有編輯器可能是個好主意。