it-swarm.com.de

Wie bekomme ich ausgewählten HTML-Text mit Javascript?

Ich kann den folgenden Code verwenden, um ausgewählten Text abzurufen:

text=window.getSelection(); /// for Firefox text=document.selection.createRange().text; /// for IE

Aber wie bekomme ich das ausgewählte HTML, das den Text und die HTML-Tags enthält? 

35
user570494

In IE <= 10 Browsern heißt es:

document.selection.createRange().htmlText

Wie @DarrenMB darauf hinweist, dass der IE11 dies nicht mehr unterstützt. Siehe diese Antwort als Referenz.


In Nicht-IE-Browsern habe ich gerade versucht, damit zu spielen ... das scheint zu funktionieren, WILL hat Nebeneffekte, wenn Knoten in zwei Hälften gebrochen werden und eine zusätzliche Spanne erzeugt wird, aber es ist ein Ausgangspunkt: 

var range = window.getSelection().getRangeAt(0),
  content = range.extractContents(),
     span = document.createElement('SPAN');

span.appendChild(content);
var htmlContent = span.innerHTML;

range.insertNode(span);

alert(htmlContent);

Leider kann ich den Knoten scheinbar nicht so zurücksetzen, wie er war (da Sie zum Beispiel die Hälfte des Textes aus einem Bereich ziehen können).

27
Mark Kahn

Hier ist eine Funktion, mit der Sie HTML-Code erhalten, der der aktuellen Auswahl in allen gängigen Browsern entspricht. Es behandelt auch mehrere Bereiche innerhalb einer Auswahl (derzeit nur in Firefox implementiert):

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

alert(getSelectionHtml());
63
Tim Down

Hier ist was ich mir ausgedacht habe. Getestet mit IE, Chrome, Firefox, Safari, Opera. Gibt keine leere Zeichenfolge zurück.

function getSelected() {
    var text = "";
    if (window.getSelection
    && window.getSelection().toString()
    && $(window.getSelection()).attr('type') != "Caret") {
        text = window.getSelection();
        return text;
    }
    else if (document.getSelection
    && document.getSelection().toString()
    && $(document.getSelection()).attr('type') != "Caret") {
        text = document.getSelection();
        return text;
    }
    else {
        var selection = document.selection && document.selection.createRange();

        if (!(typeof selection === "undefined")
        && selection.text
        && selection.text.toString()) {
            text = selection.text;
            return text;
        }
    }

    return false;
}
5
Alex

@zyklus:

Ich habe Ihre Funktion so geändert, dass sie funktioniert (ich verwende jQuery, aber diese Teile können leicht in Javascript umgeschrieben werden):

function getSelectionHtml() {
    var htmlContent = ''

    // IE
    if ($.browser.msie) {
        htmlContent = document.selection.createRange().htmlText;
    } else {
        var range = window.getSelection().getRangeAt(0);
        var content = range.cloneContents();

        $('body').append('<span id="selection_html_placeholder"></span>');
        var placeholder = document.getElementById('selection_html_placeholder');

        placeholder.appendChild(content);

        htmlContent = placeholder.innerHTML;
        $('#selection_html_placeholder').remove();

    }


    return htmlContent;
}
0
nkkollaw