Выбор: метод modify()

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Метод Selection.modify() применяет изменение к текущему выделению или позиции курсора, используя простые текстовые команды.

Синтаксис

modify(alter, direction, granularity)

Параметры

alter: Тип применяемого изменения. Укажите "move" для перемещения текущей позиции курсора или "extend" для расширения текущего выделения.
direction: Направление корректировки текущего выделения. Вы можете указать "forward" или "backward" для корректировки в соответствующем направлении, основываясь на языке в точке выделения. Если вы хотите скорректировать в определенном направлении, вы можете указать "left" или "right".
granularity: Расстояние для корректировки текущего выделения или позиции курсора. Вы можете перемещаться на "character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", или "documentboundary".

Примечание: Firefox не реализует "sentence", "paragraph", "sentenceboundary", "paragraphboundary", или "documentboundary". WebKit и Blink — да.

Примечание: Начиная с Firefox 5, гранулярность "word" больше не включает следующий пробел, независимо от поведения по умолчанию платформы. Это делает поведение более согласованным, а также делает его таким же, как и раньше у WebKit, но, к сожалению, они недавно изменили своё поведение.

Возвращаемое значение

Ничего (undefined).

Примеры

В этом примере показаны различные варианты granularity для изменения выделения. Нажмите где-нибудь внутри примера (при желании выделив текст), а затем нажмите кнопку, чтобы расширить выделение.

HTML

<p>
  Click somewhere in this example. Then click the button below to expand the
  selection. Watch what happens!
</p>
<p>
  Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
  cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
  maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
  repellendus.
</p>

<label for="granularity">Granularity:</label>
<select id="granularity">
  <option value="character">Character</option>
  <option value="word">Word</option>
  <option value="sentence">Sentence</option>
  <option value="line">Line</option>
  <option value="paragraph">Paragraph</option>
  <option value="lineboundary">Line Boundary</option>
  <option value="sentenceboundary">Sentence Boundary</option>
  <option value="paragraphboundary">Paragraph Boundary</option>
  <option value="documentboundary">Document Boundary</option>
</select>

<br /><br />

<button>Extend selection</button>

JavaScript

let select = document.querySelector("select");
let button = document.querySelector("button");

button.addEventListener("click", modify);

function modify() {
  let selection = window.getSelection();
  selection.modify("extend", "forward", select.value);
}

Результат

Спецификации

Спецификация
Selection API # dom-selection-modify

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`modify`	1	79	4	15	1.3	18	4	14	1	1.0	4.4

См. также

Selection, интерфейс, к которому она относится.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Selection/modify