js实现文字选择

实现文字选择的基本方法

使用JavaScript的Selection和Range API可以实现在网页中选择特定文本的功能。以下是核心实现方式：

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

选中指定DOM节点的文本

通过创建Range对象指定需要选中的DOM节点范围：

const element = document.getElementById('target');
const range = document.createRange();
range.selectNodeContents(element);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

选中特定字符范围

精确选择文本中的某一部分字符：

const textNode = document.querySelector('p').firstChild;
const range = document.createRange();
range.setStart(textNode, 5); // 从第5个字符开始
range.setEnd(textNode, 10);  // 到第10个字符结束
window.getSelection().addRange(range);

清除当前选中状态

window.getSelection().removeAllRanges();

处理跨浏览器兼容性

不同浏览器对Selection API的实现有差异，以下是兼容处理方案：

function selectText(node) {
    if (document.body.createTextRange) {
        // IE兼容
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        // 标准实现
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

获取选中文本的位置信息

const selection = window.getSelection();
if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const startOffset = range.startOffset;
    const endOffset = range.endOffset;
    const startContainer = range.startContainer;
    const endContainer = range.endContainer;
}

自定义高亮选中文本

结合CSS类实现视觉反馈：

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

对应的CSS样式：

.highlight {
    background-color: yellow;
    color: black;
}