jQuery выделите текст и добавьте span к нему в абзаце

Question

У меня есть функция, которая получает выделенный текст, текст выделен мышью, и добавить его в переменную. Я хочу добавить теги вокруг этой переменной в выделенном тексте - в этом абзаце.

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

Я могу получить переменную выделения текста, но вместо размещения <span></span> вокруг выделенного текста из абзаца <p>Моя функция оборачивает это снаружи.

Как я могу заменить его в абзаце? Спасибо.

Answer 1

Вот где это идет не так:

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

Это означает, что вы оборачиваете span вокруг абзаца.

Я думаю, что вы хотите сделать что-то вроде этого:

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

Answer 2

Использование .wrapInner() вместо .wrap()

Answer 3

Попробуйте обрезать выделение и заменить html-внутренние разрывы строк. Это очень помогает:

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

Answer 4

Не проверено, но должно работать:

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

Я думаю, вам нужно заменить текст в абзаце, а не использовать перенос.

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

Обратите внимание, что это будет работать надежно, только если абзац содержит только текст и без разметки.