Javascript 如何删除使用Range.setStart/setEnd选择的字符？

以下代码侦听分配给某个div的事件。按

h

选择左侧的下一个字符。按

l

选择右侧的下一个字符

  // HTML
  <div class="editable" contenteditable="true">
    <p>This is a test</p>
  </div>

  // JS
  e.preventDefault()

  const range = document.createRange()
  const content = e.target.querySelector('p').firstChild

  if (e.keyCode === 72) { // h
    range.setStart(content, this.start -= 1)
    range.setEnd(content, this.end -= 1)
  }
  if (e.keyCode === 76) { // l
    range.setStart(content, this.start += 1)
    range.setEnd(content, this.end += 1)
  }
  if (e.keyCode === 88) { // x
    range.selectNode(content)
    range.deleteContents()
  }

  window.getSelection().removeAllRanges()
  window.getSelection().addRange(range)

//HTML
这是一个测试

//JS
e、 预防默认值（）
常量范围=document.createRange（）
const content=e.target.querySelector（'p'）.firstChild
如果（e.keyCode==72）{//h
range.setStart（content，this.start-=1）
range.setEnd（content，this.end-=1）
}
如果（e.keyCode==76）{//l
range.setStart（content，this.start+=1）
range.setEnd（content，this.end+=1）
}
如果（e.keyCode==88）{//x
范围。选择节点（内容）
range.deleteContents（）
}
window.getSelection（）.removeAllRanges（）
window.getSelection（）.addRange（范围）

按

x

可以删除所选字符。我能做到的最好的方法是使用

range.selectNode（content）

，但这会删除所有字符

如何仅删除选定的字符

---

编辑：CodePen:（单击文本，然后您可以按键并查看选择移动。）

删除

范围。从代码中选择节点（内容）

，它将选择

p

中的所有文本

const input=document.getElementById（'可编辑'）
常量范围=document.createRange（）
const content=input.querySelector（'p'）.firstChild
让我们开始=0
设end=1
range.setStart（内容，0）
range.setEnd（内容，1）
input.addEventListener（'keydown'，函数（e）{
e、 预防默认值（）
如果（e.keyCode==72）{//h
range.setStart（内容，开始-=1）
range.setEnd（内容，结束-=1）
}
如果（e.keyCode==76）{//l
range.setStart（内容，开始+=1）
range.setEnd（content，end+=1）
}
如果（e.keyCode==88）{//l
//范围。选择节点（内容）
range.deleteContents（）
}
window.getSelection（）.removeAllRanges（）
window.getSelection（）.addRange（范围）
});

这是一个测试

您可以创建一个新的应用程序吗？没有这些，很难判断代码哪里出了问题。@DavidG我刚刚创建了一个。请看我的编辑，真不敢相信这么简单。谢谢