Range.setStart/setEndで選択した文字を削除するには？

Question

次のコードは、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) 

xを押すと、選択した文字が削除されます。私が達成できる最高のものはrange.selectNode(content)でしたが、これはすべての文字を削除します。

選択した文字のみを削除するにはどうすればよいですか？

EDIT： CodePen：http://codepen.io/alexcheninfo/pen/QNZeQy（テキストをクリックして、あなたがキーを押すと選択の動きを見ることができます。）

Answer 1

それはp内のすべてのテキストを選択し、あなたのコードからrange.selectNode(content)を削除します。

const input = document.getElementById('editable') 
 
const range = document.createRange() 
 
const content = input.querySelector('p').firstChild 
 
let start = 0 
 
let end = 1 
 

 
range.setStart(content, 0) 
 
range.setEnd(content, 1) 
 

 
input.addEventListener('keydown', function(e) { 
 
    e.preventDefault() 
 
    
 
    if (e.keyCode === 72) { // h 
 
    range.setStart(content, start -= 1) 
 
    range.setEnd(content, end -= 1) 
 
    } 
 
    if (e.keyCode === 76) { // l 
 
    range.setStart(content, start += 1) 
 
    range.setEnd(content, end += 1) 
 
    } 
 
    if (e.keyCode === 88) { // l 
 
    //range.selectNode(content) 
 
    range.deleteContents() 
 
    } 
 
    window.getSelection().removeAllRanges() 
 
    window.getSelection().addRange(range) 
 
});

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