API Selection и Range в JavaScript

JavaScript — мощный инструмент для веб-разработчиков, и понимание того, как манипулировать объектной моделью документа (DOM), имеет решающее значение для создания динамичных веб-приложений. В этой статье подробно рассматриваются интерфейсы Selection и Range в JavaScript, которые необходимы для работы с текстом и взаимодействия с пользователем на веб-страницах.

Понимание интерфейса Selection

Интерфейс Selection представляет собой диапазон текста, выделенного пользователем, или текущую позицию курсора. Получить к нему доступ можно через метод window.getSelection(). Этот интерфейс предоставляет различные методы и свойства, позволяющие разработчикам манипулировать выделенным текстом.

Методы интерфейса Selection

• getRangeAt(index): Возвращает объект Range, представляющий один из текущих диапазонов выделения.
• addRange(range): Добавляет объект Range в текущее выделение.
• removeRange(range): Удаляет объект Range из выделения. (Устарел в современных браузерах; вместо него используйте removeAllRanges().)
• removeAllRanges(): Удаляет все диапазоны из текущего выделения.
• collapse(node, offset): Сворачивает текущее выделение в одну точку внутри узла.

Практический пример: Подсветка текста

Вот как можно использовать интерфейсы Selection и Range для программной подсветки текста:

Примечание: extractContents() удаляет выделенный контент из DOM и сворачивает диапазон в точку вставки.

---

<div id="text">Select some of this text and press the button.</div>
<button onclick="highlightText()">Highlight</button>

<script>
function highlightText() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  const fragment = range.extractContents();
  span.appendChild(fragment);
  range.insertNode(span);
}
</script>

Try it Yourself »

Изучение интерфейса Range

Интерфейс Range представляет собой фрагмент документа, который может содержать узлы и части текстовых узлов. Диапазон можно создать с помощью метода document.createRange().

Методы интерфейса Range

• setStart(node, offset): Устанавливает начальную позицию диапазона.
• setEnd(node, offset): Устанавливает конечную позицию диапазона.
• cloneRange(): Возвращает копию диапазона.
• deleteContents(): Удаляет содержимое диапазона из документа.
• insertNode(node): Вставляет узел в начало диапазона.
• surroundContents(fragment): Заменяет содержимое диапазона на указанный фрагмент.

Практический пример: Извлечение текста

Вот пример того, как извлечь и обработать текст из конкретного узла с помощью интерфейса Range:

---

<div id="content">This is some sample text for extraction.</div>
<button onclick="extractText()">Extract and Manipulate</button>

<script>
function extractText() {
  const range = document.createRange();
  const content = document.getElementById('content');
  range.selectNodeContents(content);
  const extractedText = range.toString();
  const manipulatedText = extractedText.replace('sample', 'example'); // Manipulating text
  alert(manipulatedText);
}
</script>

Try it Yourself »

В приведенном выше примере скрипт заменяет слово "sample" на "example" в извлеченном тексте перед его отображением в окне alert. Это базовая манипуляция, но она демонстрирует, как можно начать работать с текстом после его извлечения.

Продвинутые операции с текстом

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

Пример: Вставка текста

В этом примере показан редактируемый div, в котором пользователь может щелкнуть, чтобы установить позицию курсора. После нажатия кнопки 'Hello World' будет вставлено в позицию курсора.

---

<div id="editable" contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;">
  Click here and set the cursor position.
</div>
<button onclick="insertText()">Insert 'Hello World'</button>

<script>
function insertText() {
  const editableDiv = document.getElementById('editable');
  const sel = window.getSelection();
  
  // Check if the selection is within the editable div
  if (!sel.rangeCount || !editableDiv.contains(sel.getRangeAt(0).commonAncestorContainer)) return;
  
  const range = sel.getRangeAt(0);
  range.deleteContents();  // Clears any selected text

  const textNode = document.createTextNode('Hello World');
  range.insertNode(textNode);

  sel.removeAllRanges();   // Clear the previous selection
  sel.addRange(range);     // Re-select the new text node
}
</script>

Try it Yourself »

Заключение

Интерфейсы Selection и Range предоставляют мощные инструменты для манипуляции текстом и выделениями пользователей на веб-страницах. Понимая и используя эти инструменты, разработчики могут повысить интерактивность и удобство использования своих веб-приложений. Независимо от того, подсвечиваете ли вы текст, извлекаете или вставляете контент, эти интерфейсы обеспечивают гибкость и контроль, необходимые для эффективного управления сложными взаимодействиями.

Практика

Какие из следующих утверждений верны для интерфейсов JavaScript Range и Selection?

Метод `getSelection()` возвращает объект Selection, представляющий диапазон текста, выделенный пользователем.Метод `removeAllRanges()` удаляет все диапазоны из выделения, а не только один.Метод `setEnd(node, offset)` позволяет смещению учитывать дочерние узлы, если узел является узлом элемента.Метод `deleteContents()` удаляет содержимое диапазона из документа без его возврата.Метод `collapseToEnd()` сворачивает текущее выделение в начальную точку.