js实现选区

选区的基本概念

选区（Selection）指用户在文档或输入框中选择的文本范围。通过JavaScript可以获取、修改或操作选区内容，常用于富文本编辑器、代码高亮等场景。

获取当前选区

使用 window.getSelection() 方法获取当前选区对象：

const selection = window.getSelection();
// 获取选中文本内容
const selectedText = selection.toString();

创建和设置选区

通过 Range 对象和 Selection 接口动态创建选区：

const range = document.createRange();
const targetNode = document.getElementById('target');
range.selectNodeContents(targetNode); // 选择节点内容

const selection = window.getSelection();
selection.removeAllRanges(); // 清除现有选区
selection.addRange(range);   // 设置新选区

操作选区范围

• 调整选区起始点：

  range.setStart(targetNode, 2); // 从目标节点的第2个子节点开始
  range.setEnd(targetNode, 4);   // 到第4个子节点结束

• 选区可视化高亮：
  通过CSS伪类 ::selection 自定义选中样式：

  ::selection {
    background-color: #ffcc00;
    color: #000;
  }

实际应用示例

在富文本编辑器中插入内容到选区位置：

function insertTextAtSelection(text) {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    range.deleteContents(); // 删除选中内容
    range.insertNode(document.createTextNode(text)); // 插入新文本
  }
}

兼容性注意事项

• 旧版IE（≤8）使用 document.selection 而非 window.getSelection()。
• 移动端浏览器对选区操作的支持可能有限，需测试目标平台。

常用API速查