Отримайте виділений / вибраний текст


351

Чи можливо отримати виділений текст в абзаці веб-сайту, наприклад, використовуючи jQuery?


2
Ось робочий розчин dipaksblogonline.blogspot.in/2014/11 / ...
Діпак

Простий javascript працював для мене. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)
Rohit Verma

@RohitVerma: Це буде працювати лише у простому випадку вибору, який міститься в одному текстовому вузлі, що жодним чином не гарантується.
Тім Даун

@Dipak Як ви копіюєте функціонал спільного використання соціальних мереж із блогу, на який ви посилаєтесь у своїй публікації? Замість того, щоб просто повернути вибраний рядок, я намагаюся занести цю змінну у посилання twitter.

Відповіді:


481

Отримати текст, який вибрав користувач, порівняно просто. Немає ніякої користі, залучаючи 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>


9
Що ще, якщо {} -форка хороша? що таке "Контроль"?
День

29
@Dan: Вибачте, я пропустив це питання (не думаю, що ТАК мене насторожило). Друга гілка призначена для IE <= 8 (IE 9 реалізує window.getSelection()). Перевірка document.selection.typeперевіряє, що вибір є текстовим підбором, а не контрольним вибором. У IE вибір керування - це виділення всередині редагованого елемента, що містить один або більше елементів (таких як зображення та елементи форми) з контурами та розмірами ручок. Якщо ви звертаєтесь .createRange()до такого вибору, ви отримуєте ControlRangeне a TextRange, а ControlRanges не маєте textвластивості.
Тім Даун

2
@TimDown Це дуже тонкий лід, коли-небудь можна сказати, що "jQuery не має X", оскільки, звичайно, за допомогою правильного плагіна він може робити все, що можна зробити у браузері за допомогою JavaScript. У цьому випадку у нас є jquery.selection ( madapaja.github.io/jquery.selection ). Так само невірно сказати "і не слід". Я приїхав сюди, бо шукав саме це. У мене є випадок використання, і jQuery - це правильне рішення.
Auspex

8
@Auspex: Я якось бачу вашу думку, але я не згоден. Плагін jQuery - це бібліотека, яка має залежність від jQuery; це не сам jQuery. Що стосується обробки вибору, jQuery сам не забезпечує точно нічого (що є таким, як це має бути, тому що обробка вибору не є тим, для чого jQuery), тому будь-яке рішення, яке використовує jQuery, використовує це випадково.
Тім Даун

1
@ Dennis98: Я віддалено не дратував або скривджена :) Перевірка для типів введення, тому що ви отримуєте попередження в консолі в Chrome , якщо ви намагаєтеся отримати доступ , selectionStartабо selectionEndв <input>типі елемента (наприклад, «число») , що ні підтримайте його (див. , наприклад, jsfiddle.net/6zoposby/2 ). Я залишив чек на наявність selectionStartтак, щоб код не зламався в IE <= 8. Я визнаю, що перевірка на activeElementсьогодні, ймовірно, надмірна. Я використовую, sliceтому що він є більш потужним (хоча це тут не корисно) і трохи коротше, ніж введення substring.
Тім Даун

111

Виділіть текст таким чином:

window.getSelection().toString()

і звичайно, спеціальне лікування для:

document.selection.createRange().htmlText

2
Для IE> = 10 « document.selection підтримку було видалено в IE10 та замінено на window.getSelection ». Джерело: connect.microsoft.com/IE/feedback/details/795325/…
користувач2314737

Це вийде з ладу за декількох умов у різних браузерах (наприклад, Firefox).
Макіен

11

Це рішення працює, якщо ви використовуєте хром (не можете перевірити інші веб-переглядачі) і якщо текст розташований у тому самому Елементі DOM:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.