Konvertieren von innerHTML eines contenteditable text zu normalen string

Verwende ich ein content-editable-element :

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

und

document.getElementById('myinput').innerHTML

zu Lesen, dessen Inhalt Javascript.

Aber das Ergebnis ist :

  • "blah " => innerHTML = "blah &nbsp "
  • "bonjour\n bonsoir" => innerHTML = "bonjour<br>bonsoir" (Firefox) und innerHTML = "bonjour<div>bonsoir</div>" (Chrom)
  • vielleicht gibt es viele andere Dinge, die in HTML konvertiert...

Wie konvertiert innerHTML in normalen text?

(d.h. in meinem 2 Beispiele : "blah " und "bonjour\n bonsoir")

Offensichtlich benötigen Sie den Inhalt als einen Teilbaum des Dokuments, Baum, extrahieren den text und das einfügen Zeilenumbrüche nach bestimmten Regeln (die Sie definieren müssen). Die details hängen teilweise von der beabsichtigten der text.
Dies ist teilweise gelöst : innerText funktioniert für alle Browser außer Firefox, für die ich erstellt habe, eine weitere konkrete Frage :stackoverflow.com/questions/25893229/...

InformationsquelleAutor Basj | 2014-09-17

  1. 4

    Versuchen mit;

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

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

    In Bezug auf die Suche Zeilenumbrüche, etc, betrachten;

    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);
    Oder einfach nur var text = el.textContent || el.innerText;
    .textContent nicht konvertieren <br> zu \n
    innerText funktioniert unter IE + Chrome, aber nicht verfügbar für Firefox. textContent funktioniert nicht, weil die Zeilenumbrüche verloren : "bonjour\n bonsoir" => textContent = "bonjourbonsoir". Wie mit diesem problem umzugehen ?
    aktualisierte Antwort, der einzige Weg, ich kann sehen, offhand ist die Bestimmung der einzelnen Knoten-Typ und entsprechend behandeln. Wahrscheinlich besser getan werden kann, mit einigen regex wizadry
    es funktioniert jetzt! danke @EvilEpidemic

    InformationsquelleAutor EvilEpidemic

  2. 0

    Aufgrund der Tatsache, dieses Verhalten ist nicht konsistent in den verschiedenen Browsern, die Sie implementieren müssen, um diese selbst:

    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("");
    };
})();

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

    Natürlich müssen Sie fügen Sie Ihre eigenen code, wenn Sie verwenden möchten <h1> und andere block-level-tags.

    InformationsquelleAutor Bart

Schreibe einen Kommentar