У меня есть функция, которая получает выделенный текст, текст выбран мышью, и добавьте его в переменную. Я хочу добавить теги вокруг той переменной в выделенном тексте - в том абзаце.
$("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>
, моя функция переносит эту внешнюю сторону.
Как я могу заменить его в абзаце?Спасибо.
Здесь происходит ошибка:
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));
Не проверено, но должно работать:
$("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);
}
});
Думаю, вам нужно заменить текст в абзаце, а не использовать перенос.
$("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);
}
});
Обратите внимание, что это будет работать надежно, только если абзац содержит только текст и без разметки.