js删除选中怎么实现
实现选中文本删除的方法
监听选中事件
通过监听mouseup或keyup事件来捕获用户选中的文本范围。使用window.getSelection()获取当前选区对象。
document.addEventListener('mouseup', function() {
const selection = window.getSelection();
if (!selection.isCollapsed) {
// 存在选中文本
}
});删除选中内容
获取选区后，可以通过deleteFromDocument()方法直接删除选中内容。此方法会移除选区内的所有节点和文本。
selection.deleteFromDocument();替换选中内容
若需要替换而非直接删除，可使用extractContents()提取选中内容后插入新节点。以下示例用空字符串替换选中文本：
const range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(''));处理可编辑区域
contenteditable元素 对于可编辑DIV，需确保选区在目标元素内。删除逻辑与上述相同，但需要检查选区是否有效：
const editableDiv = document.getElementById('editable');
editableDiv.addEventListener('mouseup', function() {
const sel = window.getSelection();
if (sel.rangeCount > 0 && editableDiv.contains(sel.anchorNode)) {
sel.deleteFromDocument();
}
});表单输入框
针对<input>或<textarea>，需使用selectionStart和selectionEnd属性：
const input = document.getElementById('textInput');
input.addEventListener('mouseup', function() {
if (input.selectionStart !== input.selectionEnd) {
const start = input.selectionStart;
const end = input.selectionEnd;
input.value = input.value.slice(0, start) + input.value.slice(end);
}
});兼容性注意事项
旧版IE浏览器
IE8及以下版本需使用document.selection代替window.getSelection()：
if (document.selection) {
const range = document.selection.createRange();
range.text = ''; // 清空选中内容
}跨浏览器方案 推荐使用以下兼容性封装函数处理选区删除：
function deleteSelection() {
const sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
if (sel.deleteFromDocument) {
sel.deleteFromDocument();
} else if (sel.createRange) {
const range = sel.createRange();
range.text = '';
}
}
}扩展功能实现
撤销删除操作
通过document.execCommand实现可撤销的删除操作（仅限可编辑区域）：
document.execCommand('delete', false, null);保存删除内容 删除前可先保存选中内容到剪贴板或变量：
const deletedText = selection.toString();
selection.deleteFromDocument();
console.log('已删除:', deletedText);
