jQuery seleccione texto y añádalo en un párrafo

Question

Tengo una función que obtiene el texto seleccionado, el texto se selecciona con el mouse y lo agrega a una variable. Quiero agregar etiquetas alrededor de esa variable en el texto seleccionado, en ese párrafo.

$("p").live("mouseup",function() { 
    selection = getSelectedText(); 
    if(selection.length >= 3) { 
     var $spn = $("<span></span>").html(selection).addClass("selected"); 
     $("p").wrap($spn); 
    } 
}); 

//Grab selected text 
function getSelectedText(){ 
    if(window.getSelection){ 
     return window.getSelection().toString(); 
    } 
    else if(document.getSelection){ 
     return document.getSelection(); 
    } 
    else if(document.selection){ 
     return document.selection.createRange().text; 
    } 
} 

puedo conseguir la variable de selección de texto, pero en lugar de colocar el <span></span> alrededor del texto seleccionado a partir del párrafo <p>, mi función envuelve esta afuera.

¿Cómo puedo reemplazarlo en el párrafo? Gracias.

Answer 1

Aquí es donde las cosas van mal:

var $spn = $("<span></span>").html(selection).addClass("selected"); 
$("p").wrap($spn); 

Esto significa que está envolviendo el span todo el párrafo.

Creo que te refieres a hacer algo como esto:

var spn = '<span class="selected">' + selection + '</span>'; 
$(this).html($(this).html().replace(selection, spn)); 

Answer 2

no probado, pero debería funcionar:

$("p").live("mouseup",function() { 
selection = getSelectedText(); 
if(selection.length >= 3) { 
var $spn = $("<span></span>").html(selection).addClass("selected"); 
$(this).html($(this).html().replace(selection, $spn); 
} 
}); 

Answer 3

creo que tendrá que sustituir el texto del párrafo, no utilizar envolver.

$("p").live("mouseup",function() { 
    selection = getSelectedText(); 
    if(selection.length >= 3) { 
     var spn = "<span class='selected'>" + selection + "</span>"); 
     var html = $(this).html().replace(selection,spn); 
     $(this).html(html); 
    } 
}); 

Tenga en cuenta que esto solo funcionará de forma fiable si el párrafo solo contiene texto y no contiene marcas.

Answer 4

Uso .wrapInner() en lugar de .wrap()

Answer 5

Trate de recortar la selección y sustituyen a los saltos de línea HTML-interno. Esto ayuda mucho:

$('#tweet_contents').live("mouseup",function() { 
    selection = getSelectedText().replace(/^\s+|\s+$/g,""); 

    if(selection.length >= 4) { 
     var spn = '<span id=\"selected\" class=\"polarite\" selcount=\"'+selcounter+'\" >'+selection+'<span id=\"superscript\">'+selcounter+'<\/span>'+'<\/span>'; 

    $(this).html($(this).html().replace(/(\r\n|\n|\r)/gm," ").replace(selection, spn)); 
    } 
});