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

Метод 1: использование API выбора
API выбора обеспечивает простой способ доступа к выделенному тексту внутри элемента и манипулирования им. Мы можем использовать метод getSelectionдля получения выделенного текста и применения пользовательских стилей для его выделения. Вот пример:

const textarea = document.getElementById('myTextarea');
textarea.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString();
  if (selectedText.length > 0) {
    const range = selection.getRangeAt(0);
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    range.surroundContents(span);
  }
});

Метод 2: добавление класса CSS к выделенному тексту.
Другой подход — добавить класс CSS к выделенному тексту, выделив его определенным стилем. Вот пример использования jQuery:

$('#myTextarea').on('mouseup', function() {
  const selectedText = window.getSelection().toString();
  if (selectedText.length > 0) {
    const replacementHTML = '<span class="highlighted">' + selectedText + '</span>';
    const modifiedHTML = $(this).html().replace(selectedText, replacementHTML);
    $(this).html(modifiedHTML);
  }
});

Метод 3: непосредственное управление значением текстовой области
Если вы предпочитаете работать со значением текстовой области, а не изменять ее HTML, вы можете использовать selectionStartи selectionEndсвойства, чтобы определить диапазон выделенного текста и применить пользовательские стили. Вот пример:

const textarea = document.getElementById('myTextarea');
textarea.addEventListener('mouseup', () => {
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  if (start !== end) {
    const selectedText = textarea.value.substring(start, end);
    textarea.value = textarea.value.substring(0, start) + '<mark>' + selectedText + '</mark>' + textarea.value.substring(end);
  }
});

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

const textarea = document.getElementById('myTextarea');
textarea.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString();
  if (selectedText.length > 0) {
    textarea.style.backgroundColor = 'yellow';
  } else {
    textarea.style.backgroundColor = 'white';
  }
});

Метод 5: использование библиотеки замены текстовых областей.
Существует несколько библиотек JavaScript, которые предоставляют расширенные функциональные возможности текстовых областей, включая подсветку текста. Одной из таких библиотек является «Autosize», которая автоматически регулирует высоту текстовой области в зависимости от ее содержимого. Вот пример использования Autosize для выделения выделенного текста:

const textarea = document.getElementById('myTextarea');
textarea.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString();
  if (selectedText.length > 0) {
    textarea.style.backgroundColor = 'yellow';
    Autosize.update(textarea);
  } else {
    textarea.style.backgroundColor = 'white';
  }
});

Метод 6: использование элемента div с редактируемым содержимым вместо текстовой области.
Вместо текстовой области вы можете использовать элемент div с редактируемым содержимым для достижения аналогичных функций. Вот пример:

<div id="myDiv" contenteditable="true">Editable content</div>

const div = document.getElementById('myDiv');
div.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString();
  if (selectedText.length > 0) {
    const range = window.getSelection().getRangeAt(0);
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    range.surroundContents(span);
  }
});

Метод 7. Использование платформы JavaScript, такой как React.
Если вы используете React или любую другую среду JavaScript, вы можете использовать его возможности виртуального манипулирования DOM, чтобы выделить выделенный текст в текстовой области. Вот пример использования React:

import React, { useState } from 'react';
const MyComponent = () => {
  const [value, setValue] = useState('');
  const handleSelection = () => {
    const selectedText = window.getSelection().toString();
    if (selectedText.length > 0) {
      setValue(
        value.replace(
          selectedText,
          `<span class="highlightted">${selectedText}</span>`
        )
      );
    }
  };
  return (
    <textarea value={value} onChange={(e) => setValue(e.target.value)} onMouseUp={handleSelection} />
  );
};

Метод 8. Использование сторонней библиотеки текстового редактора.
Если вам нужны более расширенные возможности редактирования текста, вы можете рассмотреть возможность использования сторонней библиотеки текстового редактора, такой как Quill или TinyMCE. Эти библиотеки предоставляют встроенную поддержку выделения выделенного текста и предлагают широкий спектр функций. Вот пример использования Quill:

const quill = new Quill('#myEditor', {
  theme: 'snow',
});
quill.on('selection-change', (range) => {
  if (range && range.length > 0) {
    quill.format('background', 'yellow');
  } else {
    quill.format('background', false);
  }
});

Метод 9: использование расширения или плагина для браузера.
Если вы разрабатываете расширение или плагин для браузера, вы можете использовать его возможности для выделения выделенного текста в текстовой области и идентификации активного элемента. Расширения браузера имеют больше свободы в изменении DOM и внедрении пользовательских стилей. Вот упрощенный пример использования WebExtensions API:

document.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString();
  if (selectedText.length > 0) {
    const activeElement = document.activeElement;
    activeElement.style.backgroundColor = 'yellow';
  }
});

Метод 10: использование комбинации CSS и JavaScript
Наконец, вы можете объединить CSS и JavaScript для достижения желаемой функциональности. Добавляя пользовательские классы и динамически применяя стили, вы можете выделять выделенный текст и отслеживать активный элемент. Вот пример:

const textarea = document.getElementById('myTextarea');
textarea.addEventListener('mouseup', () => {
  const selectedText = window.getSelection().toString();
  if (selectedText.length > 0) {
    textarea.classList.add('highlighted');
  } else {
    textarea.classList.remove('highlighted');
  }
});
// CSS style
.highlighted {
  background-color: yellow;
}

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