当前位置：首页 > JavaScript

js实现文字选择

2026-02-02 13:30:29JavaScript

实现文字选择的基本方法

使用JavaScript的window.getSelection()方法可以获取用户选择的文本范围。以下是一个基本示例：

function getSelectedText() {
  const selection = window.getSelection();
  return selection.toString();
}

document.addEventListener('mouseup', () => {
  const selectedText = getSelectedText();
  if (selectedText) {
    console.log('选中的文本:', selectedText);
  }
});

获取选择范围的详细信息

如果需要获取选择范围的更多信息，可以使用Range对象：

function getSelectionDetails() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    return {
      text: range.toString(),
      startOffset: range.startOffset,
      endOffset: range.endOffset,
      startContainer: range.startContainer,
      endContainer: range.endContainer
    };
  }
  return null;
}

自定义高亮选中文本

可以通过修改DOM来高亮显示用户选择的文本：

function highlightSelection() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0 && !selection.isCollapsed) {
    const range = selection.getRangeAt(0);
    const span = document.createElement('span');
    span.className = 'highlight';
    range.surroundContents(span);
    selection.removeAllRanges();
  }
}

// CSS样式
.highlight {
  background-color: yellow;
}

处理跨元素选择

当选择跨越多个元素时，需要特殊处理：

function handleCrossElementSelection() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const fragment = range.cloneContents();
    const div = document.createElement('div');
    div.appendChild(fragment);
    console.log('跨元素选择内容:', div.innerHTML);
  }
}

监听选择变化事件

使用document.onselectionchange事件可以监听选择的变化：

document.onselectionchange = function() {
  const selection = window.getSelection();
  if (!selection.isCollapsed) {
    console.log('选择发生变化:', selection.toString());
  }
};

兼容性处理

不同浏览器可能有细微差异，可以使用以下代码增强兼容性：

function getSelectionCompat() {
  if (window.getSelection) {
    return window.getSelection();
  } else if (document.selection) {
    return document.selection.createRange();
  }
  return null;
}

创建自定义选择

也可以以编程方式创建选择：

function selectText(element) {
  const range = document.createRange();
  range.selectNodeContents(element);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

清除当前选择

清除当前选择的简单方法：

function clearSelection() {
  if (window.getSelection) {
    window.getSelection().removeAllRanges();
  } else if (document.selection) {
    document.selection.empty();
  }
}

这些方法覆盖了JavaScript中处理文字选择的主要场景，包括获取选择内容、操作选择范围以及处理跨元素选择等复杂情况。

js实现文字选择