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 上檢視此頁面 • 報告此內容的潛在問題