如何刪除所有div標簽，而不刪除其內容？ （使用contenteditable =“ true”，HTML5）

Question

如何刪除所有div標簽，而不刪除其內容？ （使用conteneditable =“ true”，HTML5）

我有一個不是真正的textarea- <div>具有contenteditable="true" 。 當我按下“提交”按鈕時，代碼正在讀取此元素的innerHTML。 這不好。

因此，我想將其用作文本區域，我需要：

1. 刪除沒有內容的<div>標記（當我開始換行時，瀏覽器將關閉先前的<div> （如果存在）並啟動新的<div> 。
2. 刪除所有與<br />不同的其他標簽（但如果<br>連續超過2個標簽，則將其刪除）。

如何實現呢？ 在服務器端和用戶端（因為它是通過xhr發送的）。

Answer 1

獲取父<div> ，克隆節點，並遍歷克隆的樹：刪除沒有內容的<div>節點，以及其他不允許的標簽。

完成遍歷后，您可以提交Dom元素剩余的內容。

Answer 2

我過去曾經使用過內容可編輯的div，最好的使用方法是間接使用它們。 與其讓他們將內容扔到php上，不如在某個地方有一個隱藏的textarea ，並在其中具有“提交”按鈕（“提交”顯然沒有被隱藏），然后在其他地方提供可編輯div的內容。 然后，您可以使用jQuery來獲取div的內容，然后使用一些時髦的正則表達式將其解析為您的<br />和<div>和</div>標記。

<div contenteditable="true" style="width:200px; height:100px;" id="InputDiv">
...
</div>

<form action="something.php">
    <textarea id="InputArea" style="visibility:hidden;">
    <input onclick="getData()"type="submit" value="submit" >
</form>

與相應的jQuery：

function getData(){
    var rawDiv = $("#InputArea").text();
    var parsedStr = /*some funky regex*/;
    $("#InputArea").text(parsedStr);
}

我似乎將我以前的工作與jQuery和contenteditable div放在一起了，但是應該沿這條線工作。

替代：

為什么不使用markdown而不是使用內容可編輯的div？ 解決此類問題的需求將減少。

Answer 3

這可以解決問題：

document.getElementById(/*your_div_to_be_removed*/).removeNode(false);