¿Puedo cambiar el HTML del texto seleccionado?

¿Podemos cambiar el HTML o sus atributos de la parte seleccionada de la página web usando javascript?

Por ejemplo, hay una página web aleatoria: (se muestra una parte de ella)

enter image description here

con HTML como

...<p>Sample paragraph</p>..

Es posible obtener el HTML del texto seleccionado que ya ha sido respondido aquí.

Pero, ¿me es posible cambiar el html del texto seleccionado? Me gusta, agregue un atributo de clase o identificación a la etiqueta de párrafo.

preguntado el 28 de julio de 12 a las 05:07

No veo cómo podría ser posible... ¿Solo si el usuario selecciona el texto y luego presiona un botón? -

@ slm_92 ¿cómo es posible incluso si el usuario selecciona y presiona un botón? -

Rangy al rescate. (No se requiere jQuery.) -

Rangy se ve bastante bien. -

2 Respuestas

El complemento jQuery wrapselection suena como lo que estás buscando http://archive.plugins.jquery.com/project/wrapSelection . Sin embargo, lo que está solicitando no es directamente posible, el complemento funciona agregando nodos adicionales alrededor del texto circundante que pueden no ser 100% confiables (particularmente en IE6-8)

Respondido 28 Jul 12, 05:07

Gracias. Estaba buscando algo similar. Pero, ¿es posible cambiar el atributo id? - Fani Raúl

Aquí hay un ejemplo de trabajo sin un complemento.

http://jsfiddle.net/9HTPw/2/

function getSel() {
    var sel = null;
    if (
    typeof document.selection != "undefined" && document.selection 
                                   && document.selection.type == "Text") {
        sel = document.selection;
    } else if (
    window.getSelection && window.getSelection().rangeCount > 0) {
        sel = window.getSelection();
    }
    return sel;
}

var getSelectionStart = (function () {

    function createRangeFromSel(sel) {
        var rng = null;
        if (sel.createRange) {
            rng = sel.createRange();
        } else if (sel.getRangeAt) {
            rng = sel.getRangeAt(0);
            if (rng.toString() == "") rng = null;
        }
        return rng;
    }

    return function (el) {
        var sel = getSel(),
            rng, r2, i = -1;
        if (sel) {
            rng = createRangeFromSel(sel);
            if (rng) {

                if (rng.parentElement) {
                    if (rng.parentElement() == el) {
                        r2 = document.body.createTextRange();
                        r2.moveToElementText(el);
                        r2.collapse(true);
                        r2.setEndPoint("EndToStart", rng);
                        i = r2.text.length;
                    }
                } else {
                    if ( rng.startContainer && rng.endContainer 
                   &&  rng.startContainer == rng.endContainer 
                   && rng.startContainer == rng.commonAncestorContainer 
                   && rng.commonAncestorContainer.parentNode == el) {

                        //make sure your DIV does not have any inner element,
                        //otherwise more code is required in order to filter
                        //text nodes and count chars

                        i = rng.startOffset;
                    }
                }
            }
        }
        return i;
    };

})();


$("#content").on('mousedown', function () {
    $("#content").html(content)
});

var content = $("#content").html();

$("#content").on('mouseup', function () {
    var start = getSelectionStart(this);
    var len = getSel().toString().length;


    $(this).html(
            content.substr(0, start) + 
            '<span style=\"background-color: yellow;\">' +
            content.substr(start, len) + 
            '</span>' +
            content.substr(Number(start) + Number(len), content.toString().length));
});

Referencias: http://bytes.com/topic/javascript/answers/153164-return-selectionstart-div

Respondido 28 Jul 12, 15:07

¿Se supone que el texto desaparece al hacer clic fuera del texto resaltado o se trata de un error? - anderson verde

Ah, sí, es sólo un error. Sin embargo, estoy seguro de que puedes descubrir cómo solucionarlo;) - cielo oscuro

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.