当前位置：首页 > JavaScript

js实现选区

2026-04-07 00:35:56JavaScript

使用JavaScript实现选区操作

在JavaScript中，选区（Selection）可以通过Selection和Range对象来实现。以下是几种常见的选区操作方法：

获取当前选区对象

const selection = window.getSelection();

创建新的选区范围

const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
selection.removeAllRanges();
selection.addRange(range);

获取选中文本内容

const selectedText = selection.toString();

清除当前选区

js实现选区

selection.removeAllRanges();

检查是否有选区

if (!selection.isCollapsed) {
  // 存在选区
}

常见应用场景

高亮选中文本

document.addEventListener('mouseup', function() {
  const selection = window.getSelection();
  if (selection.toString().length > 0) {
    // 处理选中文本
  }
});

自定义右键菜单

js实现选区

document.addEventListener('contextmenu', function(e) {
  const selection = window.getSelection();
  if (selection.toString().length > 0) {
    // 显示自定义菜单
    e.preventDefault();
  }
});

保存和恢复选区

// 保存选区
function saveSelection() {
  const selection = window.getSelection();
  return {
    anchorNode: selection.anchorNode,
    anchorOffset: selection.anchorOffset,
    focusNode: selection.focusNode,
    focusOffset: selection.focusOffset
  };
}

// 恢复选区
function restoreSelection(savedSel) {
  const selection = window.getSelection();
  const range = document.createRange();
  range.setStart(savedSel.anchorNode, savedSel.anchorOffset);
  range.setEnd(savedSel.focusNode, savedSel.focusOffset);
  selection.removeAllRanges();
  selection.addRange(range);
}

跨浏览器兼容性处理

不同浏览器对选区API的实现略有差异，可以使用以下方法增强兼容性：

function getSelectionText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  } else if (document.selection) {
    return document.selection.createRange().text;
  }
  return '';
}

处理内容可编辑区域的选区

const editableDiv = document.getElementById('editable');
editableDiv.addEventListener('mouseup', function() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    // 处理选区
  }
});