ejemplos - ¿Cómo obtener texto html seleccionado con javascript?

obtener contenido de un div javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• HTML del texto seleccionado 1 respuesta

Puedo usar el siguiente código para obtener el texto seleccionado:

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

¿Pero cómo puedo obtener el Html seleccionado, que incluye las etiquetas de texto y html?

Answer 1

@zyklus:

Modifiqué tu función para que funcionara (estoy usando jQuery pero esas piezas se pueden reescribir fácilmente 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;
}

Answer 2

Aquí hay una función que le dará HTML correspondiente a la selección actual en todos los principales navegadores. También maneja múltiples rangos dentro de una selección (actualmente solo implementada en 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());

Answer 3

En IE <= 10 navegadores, es:

document.selection.createRange().htmlText

Como @DarrenMB señaló que IE11 ya no es compatible con esto. Vea esta respuesta para referencia.

En los navegadores que no son IE, simplemente intenté jugar con esto ... esto parece funcionar, TENDRÁ efectos secundarios de partir nodos a la mitad y crear un lapso adicional, pero es un punto de partida:

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

Desafortunadamente, parece que no puedo volver a poner el nodo como estaba (ya que puedes sacar la mitad del texto de un tramo, por ejemplo).

Answer 4

Encontré el complemento highlight como la mejor opción, es muy ligero y con él puedes resaltar parte del contenido :

$(''li'').highlight(''bla'');

Answer 5

Esto es lo que se me ocurrió. Probado con IE, Chrome, Firefox, Safari, Opera. No devuelve cadena vacía

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