HTML DOM getRangeAt() 方法

HTML DOM getRangeAt() 方法是一种获取文本范围对象（Range）的方法，它可以用于捕获用户选择的文本范围，处理用户的输入并改变文档内容。本文将介绍该方法的语法、参数以及实例使用。

语法

document.getSelection().getRangeAt(index);

参数

index：一个整数，表示文本范围对象（Range）在文本选择器对象（Selection）中的索引。

返回值

该方法返回一个文本范围对象（Range）。

实例

获取用户选中的文本

假设有一个文本框，当用户选择其中的文本时，我们希望能够获取到这些文本，那么可以使用如下代码：

document.querySelector('textarea').addEventListener('mouseup', function() {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const selectedText = range.toString();
    console.log(selectedText);
  }
});

将选中的文本储存为指定格式

同样以文本框为例，当用户选择其中的文本并点击“加粗”按钮时，我们希望能够将其变为加粗文本。可以使用如下代码：

document.querySelector('textarea').addEventListener('mouseup', function() {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const selectedText = range.toString();
    const boldText = document.createElement('b');
    boldText.appendChild(document.createTextNode(selectedText));
    range.deleteContents();
    range.insertNode(boldText);
  }
});

以上代码中，我们使用getRangeAt()方法获取到用户选择的文本范围，然后将其封装为一个<b>标签并插入文本范围中，从而将用户选中的文本变为加粗格式。

总结

HTML DOM getRangeAt()方法可以用于获取文本范围对象（Range），进而处理用户选择的文本，改变文档内容。需要注意的是，该方法有一个参数，表示文本范围对象在文本选择器对象中的索引，因此必须保证该索引在文本选择器对象可用范围内。