текст выбора jQuery и добавляет промежуток к нему в абзаце

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

$("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>, моя функция переносит эту внешнюю сторону.

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

6
задан albertein 26 November 2010 в 19:52
поделиться

4 ответа

Здесь происходит ошибка:

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

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

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

var spn = '<span class="selected">' + selection + '</span>';
$(this).html($(this).html().replace(selection, spn));
5
ответ дан 17 December 2019 в 00:09
поделиться

Используйте .wrapInner () вместо .wrap ()

1
ответ дан 17 December 2019 в 00:09
поделиться

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

$("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);
}
});
0
ответ дан 17 December 2019 в 00:09
поделиться

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

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

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

0
ответ дан 17 December 2019 в 00:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: