Convert innerHTML content-friendly content to a regular string

Question

I am using an element editable for content:

<span id="myinput" contenteditable="true">This is editable.</span>

and

document.getElementById('myinput').innerHTML

to read its contents from Javascript.

But the result:

• "blah " => innerHTML = "blah   "

• "bonjour\n bonsoir"=> innerHTML = "bonjour<br>bonsoir"(Firefox) and innerHTML = "bonjour<div>bonsoir</div>"(Chrome)

• perhaps there are many other things that translate into HTML ...

How to convert innerHTMLto plain text?

(i.e. in my two examples: "blah "and "bonjour\n bonsoir")

Answer 1

Try using

#for IE
document.getElementById('myinput').innerText

#for everyone else
document.getElementById('myinput').textContent

From the point of view of finding strings, etc., think:

el = document.getElementById('myinput');
var nodes = el.childNodes;
var text = '';

for(var i = 0; i < nodes.length; i++) {                        
    switch(nodes[i].nodeName) {
        case '#text'    : text = text + nodes[i].nodeValue;   break;
        case 'BR'       : text = text + '\n';      break;
    }
}
console.log(text);

Answer 2

- , , :

var convert = (function() {
    var convertElement = function(element) {
        switch(element.tagName) {
            case "BR": 
                return "\n";
            case "P": // fall through to DIV
            case "DIV": 
                return (element.previousSibling ? "\n" : "") 
                    + [].map.call(element.childNodes, convertElement).join("");
            default: 
                return element.textContent;
        }
    };

    return function(element) {
        return [].map.call(element.childNodes, convertElement).join("");
    };
})();

: http://jsfiddle.net/koyd8h59/1/

, , <h1> .