Чи можливо отримати виділений текст в абзаці веб-сайту, наприклад, використовуючи jQuery?
Чи можливо отримати виділений текст в абзаці веб-сайту, наприклад, використовуючи jQuery?
Відповіді:
Отримати текст, який вибрав користувач, порівняно просто. Немає ніякої користі, залучаючи jQuery, оскільки вам не потрібно нічого, крім об'єктів window
і document
.
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
Якщо вас зацікавила реалізація, яка також стосуватиметься виділень <textarea>
та текстових <input>
елементів, ви можете використовувати наступне. Оскільки це зараз 2016, я опускаю код, необхідний для підтримки IE <= 8, але я розміщував інформацію про це в багатьох місцях на SO.
function getSelectionText() {
var text = "";
var activeEl = document.activeElement;
var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
if (
(activeElTagName == "textarea") || (activeElTagName == "input" &&
/^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
(typeof activeEl.selectionStart == "number")
) {
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
} else if (window.getSelection) {
text = window.getSelection().toString();
}
return text;
}
document.onmouseup = document.onkeyup = document.onselectionchange = function() {
document.getElementById("sel").value = getSelectionText();
};
Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>
window.getSelection()
). Перевірка document.selection.type
перевіряє, що вибір є текстовим підбором, а не контрольним вибором. У IE вибір керування - це виділення всередині редагованого елемента, що містить один або більше елементів (таких як зображення та елементи форми) з контурами та розмірами ручок. Якщо ви звертаєтесь .createRange()
до такого вибору, ви отримуєте ControlRange
не a TextRange
, а ControlRange
s не маєте text
властивості.
selectionStart
або selectionEnd
в <input>
типі елемента (наприклад, «число») , що ні підтримайте його (див. , наприклад, jsfiddle.net/6zoposby/2 ). Я залишив чек на наявність selectionStart
так, щоб код не зламався в IE <= 8. Я визнаю, що перевірка на activeElement
сьогодні, ймовірно, надмірна. Я використовую, slice
тому що він є більш потужним (хоча це тут не корисно) і трохи коротше, ніж введення substring
.
Виділіть текст таким чином:
window.getSelection().toString()
і звичайно, спеціальне лікування для:
document.selection.createRange().htmlText
document.selection
підтримку було видалено в IE10 та замінено на window.getSelection
». Джерело: connect.microsoft.com/IE/feedback/details/795325/…
Це рішення працює, якщо ви використовуєте хром (не можете перевірити інші веб-переглядачі) і якщо текст розташований у тому самому Елементі DOM:
window.getSelection().anchorNode.textContent.substring(
window.getSelection().extentOffset,
window.getSelection().anchorOffset)
Використовуйте window.getSelection().toString()
.
Детальніше ви можете прочитати на developer.mozilla.org