Как получить выделенный текст на сайте: jQuery

Быстрый ответ

Чтобы извлечь выделенный текст пользователем в JavaScript, используйте метод window.getSelection():

const selectedText = window.getSelection().toString();
alert(selectedText);

Запустив данный код, вы увидите модальное окно, в котором отображается текст, выделенный пользователем на странице.

Совместимость и обработка исключений

Если работаете со выделенным текстом в элементах <textarea> или <input>, примените свойства selectionStart и selectionEnd:

function getSelectedTextFromInput(element) {
  return element.value.substring(element.selectionStart, element.selectionEnd);
}

Для обеспечения кросс-браузерной совместимости учтите, что в старых версиях Internet Explorer (IE) метод window.getSelection() не поддерживается. Вместо него используйте document.selection.createRange().text:

function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  } else if (document.selection) { // Этот код для старых версий IE (до 9-й включительно)
    return document.selection.createRange().text;
  }
  return '';
}

Если поддержка IE до 9-й версии не входит в ваши планы, то можно исключить соотвествующий код, что увеличивает производительность.

Отслеживание выделения в реальном времени

Для непосредственного отслеживания выделенного текста используйте обработчики событий document.onmouseup, document.onkeyup и document.onselectionchange. Это позволит вам уловить момент, когда пользователь выделяет текст:

document.addEventListener('mouseup', () => {
  const selectedText = getSelectedText();
  if(selectedText) {
    console.log('Мышь подсказывает: ', selectedText);
  }
});

document.addEventListener('keyup', () => {
  const activeElement = document.activeElement;
  const tagName = activeElement.tagName.toLowerCase();
  if(tagName === 'textarea' || (tagName === 'input' && activeElement.type === 'text')) {
    const selectedText = getSelectedTextFromInput(activeElement);
    if(selectedText) {
      console.log('Клавиша сообщает: ', selectedText);
    }
  }
});

document.addEventListener('selectionchange', () => {
  console.log('Совершено выделение: ', getSelectedText());
});

Использование пользовательского выделения

Для обогащения пользовательского опыта предоставьте возможности копирования и поделиться. Фиксированный выделенный текст можно использовать для копирования в буфер обмена или публикации в социальных сетях:

function copySelectedText() {
  const text = getSelectedText();
  if (navigator.clipboard && text) {
    navigator.clipboard.writeText(text).then(() => {
      console.log('Текст успешно скопирован в буфер обмена 🎢');
    });
  }
}

Отслеживание того, какие фрагменты содержимого пользователи чаще выделяют, можно использовать в аналитических целях. Анализ их поведения поможет улучшить пользовательский интерфейс.

Анализ пользовательского выделения

Пришло время вооружиться лупой Шерлока Холмса и тщательно изучить выделенный текст, которым предпочитают пользователи. Распознавание их предпочтений может стать прекрасным инструментом для предложения более персонализированного контента:

let userSelections = [];

document.addEventListener('mouseup', () => {
  const text = getSelectedText();
  if(text) {
    userSelections.push(text);
    analyzeSelections(userSelections);
  }
});

function analyzeSelections(selections) {
  //    Находимся в роли детектива 👀
  // Производим анализ наиболее популярного текста.
}

Визуализация

Продемонстрируем, как ваши слова в абзаце превращаются под мановением волшебной палочки JavaScript:

До преобразования: [Слова, Слова, Слова, Слова, Слова]
После преобразования:   [      **Выделенные слова**          ]

Волшебство JavaScript позволяет сделать так:

const selectedText = window.getSelection().toString();

И вуаля:

🎩🐇 Сфокусируем внимание на: ["Lorem ipsum dolor..."]
💥 Акцент на выделение: [**ipsum dolor**]

Лучшие практики: Доступность и UX

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

• Выберите горячие клавиши для управления выделенным текстом.
• Информируйте об изменении выделения с помощью ARIA live regions для пользователей с нарушениями зрения.
• Обеспечьте заметную визуальную индикацию фокусировки на выделенном тексте для облегчения навигации пользователям.

Сохраняем согласованность между устройствами

Кто сказал, что эти функции предназначены только для компьютеров? Важно гарантировать идеальное пользовательское взаимодействие на различных устройствах, включая планшеты и смартфоны. Каждый пользователь заслуживает высококачественного обслуживания!

Полезные материалы

1. Метод Window: getSelection() – Веб-API | MDN — и exhaustive guide по методу getSelection().
2. javascript – Как получить выделенный текст – Stack Overflow — золотой фонд решений для извлечения выделенного текста в JavaScript.
3. Selection and Range — подробнейший анализ операций с выделением и диапазоном текста в JavaScript.
4. web.dev — основной ресурс для изучения современных веб-практик и API, включая Selection API.
5. Как скопировать текст в буфер обмена с помощью JavaScript? – Stack Overflow — секреты копирования и вставки от профессионалов. Примеры применения в JavaScript.
6. Medium — советы и трюки по работе с выделением текста в JavaScript.