Вопрос по javascript, jquery – Поставить теги вокруг выделенного пользователем текста?
Мне нужно получить выбранную пользователем область текстовой области, а затем вставить<a> метит вокруг него.
Я использую это, чтобы получить выбранную пользователем область:
var textComponent = document.getElementById('article');
var selectedText;
if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
// Mozilla version
else if (textComponent.selectionStart != undefined)
{
var startPos = textComponent.selectionStart;
var endPos = textComponent.selectionEnd;
selectedText = textComponent.value.substring(startPos, endPos)
}
Теперь я знаю, что могу выполнить поиск строки для выбранного пользователем текста и вставить вокруг него теги, но что произойдет, если выбранный пользователем текст появится в тексте, например, дважды.
Привет тебе, до свидания.
Если пользователь выделяет второе «вы» для ссылки, которую он хочет, несомненно, замена строки будет помещать теги вокруг каждого экземпляра «вы».
Какой лучший способ сделать это?
lastFocusedElement переменная может помочь. Найти текст в этом конкретном элементе.
Jashwant
Ты можешь использовать мойjQuery плагин за это Демо):
$("#article").surroundSelectedText('<a href="foo.html">', "</a>");
В качестве альтернативы вы можете использоватьgetInputSelection()ункция @, которую я несколько раз выкладывал в Stack Overflow, чтобы получить начальные и конечные индексы выбора во всех основных браузерах, а затем выполнить подстановку строк в текстовой областиvalue:
var sel = getInputSelection(textComponent);
var val = textComponent.value;
textComponent.value = val.slice(0, sel.start) +
'<a href="foo.html">' +
val.slice(sel.start, sel.end) +
"</a>" +
val.slice(sel.end);
что вы действительно хотите, это начальные / конечные позиции для добавления тегов.
var textComponent = document.getElementById('article');
var selectedText;
var startPos;
var endPos;
// the easy way
if (textComponent.selectionStart != undefined)
{
startPos = textComponent.selectionStart;
endPos = textComponent.selectionEnd;
}
// the hard way
else if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText(textComponent);
stored_range.setEndPoint( 'EndToEnd', range );
startPos = stored_range.text.length - range.text.length;
endPos = startPos + range.text.length;
}
// add in tags at startPos and endPos
var val = textComponent.value;
textComponent.value = val.substring(0, startPos) + "<a>" + val.substring(startPos, endPos) + "</a>" + val.substring(endPos);
IE код изменен с эта ссылка.
РЕДАКТИРОВАТЬ Обратите внимание на комментарий Тима Дауна о новых строках. Кроме того, возможно, используйте его решение, потому что это лучше.
selectionStart а такжеselectionEnd над подходом TextRange в браузерах, которые поддерживают оба (например, IE> = 9). Кроме того, этот код не будет правильно определять выборки, начинающиеся или заканчивающиеся пустыми строками в IE: см. Jsfiddle.net / Lq5aP / 1. Наконец, в ветке IE есть опечатка: должно бытьendPos = startPos + range.text.length;.
Tim Down