如何删除所有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);