jQuery zaznacz tekst i dodaj do niego span w akapicie

Question

Mam funkcję, która pobiera zaznaczony tekst, tekst jest wybierany myszą i dodaje go do zmiennej. Chcę dodać znaczniki wokół tej zmiennej w zaznaczonym tekście - w tym akapicie.

$("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; 
    } 
} 

mogę zmiennej wyboru tekstu, ale zamiast umieszczania <span></span> wokół zaznaczonego tekstu z ust <p>, moja funkcja zawija to na zewnątrz.

Jak mogę go wymienić w akapicie? Dziękuję.

Answer 1

To gdzie to idzie źle:

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

Oznacza to jesteś owijania span wokół ust.

Chyba masz na myśli coś takiego:

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

Answer 2

Nietestowane, ale powinno działać:

$("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

Chyba trzeba zastąpić tekst w akapicie, nie używać owinąć.

$("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); 
    } 
}); 

Należy pamiętać, że działa to niezawodnie, jeśli akapit zawiera tylko tekst i nie zawiera znaczników.

Answer 4

Zastosowanie .wrapInner() zamiast .wrap()

Answer 5

spróbuj przyciąć wybrany fragment i zastąpić podziały wiersza HTML wewnętrzny. To bardzo pomaga:

$('#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)); 
    } 
});