web-dev-qa-db-fra.com

Comment obtenir du texte HTML sélectionné avec javascript?

Je peux utiliser le code suivant pour obtenir le texte sélectionné:

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

Mais comment puis-je obtenir le code HTML sélectionné, qui inclut les balises texte et HTML? 

javascriptgetselection
35
user570494

Dans IE <= 10 navigateurs, c'est:

document.selection.createRange().htmlText

Comme @DarrenMB l'a souligné, IE11 ne le supporte plus. Voir cette réponse pour référence.

Dans les navigateurs non-IE, j'ai juste essayé de jouer avec ça ... cela semble fonctionner, cela aura des effets secondaires de couper les nœuds en deux et de créer une durée supplémentaire, mais c'est un point de départ: 

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

Malheureusement, je n'arrive pas à remettre le nœud tel quel (puisque vous pouvez extraire la moitié du texte d'une plage, par exemple).

27
Mark Kahn

Voici une fonction qui vous permettra d'obtenir le code HTML correspondant à la sélection en cours dans tous les principaux navigateurs. Il gère également plusieurs plages dans une sélection (actuellement uniquement implémenté dans Firefox):

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

Voici ce que je suis venu avec. Testé avec IE, Chrome, Firefox, Safari, Opera. Ne retourne pas de chaîne vide.

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:

J'ai modifié votre fonction pour qu'elle fonctionne (j'utilise jQuery mais ces éléments peuvent être facilement réécrits en Javascript):

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