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中处理文本选择的主要场景，可以根据具体需求选择合适的方法实现。
