Question

How to remove all div tags, but not content, which it have? (Working with conteneditable=”true”, HTML5)

I have a not real textarea – just <div> with contenteditable="true". When I’m pressing ‘submit’ button, code is reading innerHTML of this element. It’s not good.

So, I want to use it as textarea, I need to:

1. Remove <div> tags without content (when I’m starting new line, browser closing previous <div> (if exist) and starting new <div>.
2. Remove all other tags, different from <br /> (but if <br> tags more than 2 on a row, delete it).

How to realize it? On server side and on user side (because it sends by xhr).

Answer 1

I have used content editable divs in the past, the best way to use them is indirectly;
rather than having them throw the content at php, have a hidden textarea somewhere, with the submit button in that (the submit not hidden obviously) and then the content editable div elsewhere. You can then use jQuery to grab the content of your div and then use some funky regex to parse it for your <br /> and <div> and </div> tags.

<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>

With the corresponding jQuery:

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

I seem to have misplaced my previous work with jquery and contenteditable divs, but something along this line should work.

An alternative:

Rather than using content editable divs, why not use markdown? There would be less need to sort out this kind of problem.