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);