Selection：modify() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

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

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

浏览器兼容性

另见

Selection，它所属的接口。

帮助改进 MDN

了解如何贡献

此页面最后修改于 2024年9月2日，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的潜在问题