js实现文字选择

实现文字选择的基本方法

使用JavaScript的Selection和Range对象可以操作文本选择。以下是一个基本示例：

// 获取当前选择
const selection = window.getSelection();
// 创建新的范围
const range = document.createRange();
// 设置范围起始和结束位置
range.setStart(element, startOffset);
range.setEnd(element, endOffset);
// 清除现有选择并添加新范围
selection.removeAllRanges();
selection.addRange(range);

选择特定元素内的文本

要选择某个DOM元素内的所有文本内容：

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

获取当前选择的文本

获取用户当前选择的文本内容：

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

清除当前选择

清除页面上的任何文本选择：

function clearSelection() {
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

处理选择事件

监听文本选择变化：

document.addEventListener('selectionchange', () => {
    console.log('当前选择:', window.getSelection().toString());
});

跨浏览器兼容方案

考虑旧版本浏览器的兼容性处理：

function selectTextCrossBrowser(element) {
    if (document.body.createTextRange) {
        // IE兼容
        const range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        // 现代浏览器
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

选择输入框文本

专门针对input或textarea元素的选择：

function selectInputText(inputElement) {
    inputElement.select();
}

这些方法覆盖了JavaScript中处理文本选择的主要场景，可以根据具体需求选择合适的方法实现。