テキストが選択されている場合にスパンで折り返す

Question

バックスペース/削除キーがヒットしたときに、強調表示されたテキストを<span>で囲むために、次の関数を使用しています。

$(document).keydown(function(event) { 
 
    var selection = document.getSelection(); 
 
    typoNumber++; 
 
    if (event.keyCode == 8 || event.keyCode == 46) { 
 
    event.preventDefault(); 
 
    var span = document.createElement("span"); 
 
    span.setAttribute('id', 'typo' + typoNumber); 
 
    span.className = "deleted typo"; 
 
    span.setAttribute('contenteditable', 'false'); 
 
    if (window.getSelection) { 
 
     var sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     var range = sel.getRangeAt(0).cloneRange(); 
 
     range.surroundContents(span); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
     } 
 
    } 
 
    } 
 
});

.deleted.typo { 
 
    background: rgba(100,100,100,0.25); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Here is text to experiment with.</div>

選択したテキストは、（私は空<span>要素の束を取得しないように）がある場合、私は唯一の機能を実行したいです。最初のifの文を次のように変更してみました：

if (selection !== '' && event.keyCode == 8 || event.keyCode == 46) { 

しかし、それはうまくいかなかった。何か案は？

Answer 1

これにあなたの状態を変更すると、あなたを助ける必要があります。

if(
    selection.anchorOffset !== selection.focusOffset 
    && 
    (event.keyCode == 8 || event.keyCode == 46) 
) 

フィドル：https://jsfiddle.net/34L49xLr/

Answer 2

getSelectionは、実際にオブジェクト（SelectionObject）を返します - あなたは、文字列にそれを変換し、その後にその長さを確認することができますがテキストが選択されているかどうかを判断します。それをしなかった

// Make sure you're initializing this somewhere; this function expects it defined. 
 
var typoNumber = 0; 
 

 
$(document).keydown(function(event) { 
 
    var selection = document.getSelection(); 
 

 
    // If there's nothing selected, bail out here. 
 
    // If you want to increment typoNumber even with an empty selection, 
 
    // move that line above this block. 
 
    if (selection.toString().length < 1) { 
 
    return; 
 
    } 
 

 
    typoNumber++; 
 
    if (event.keyCode == 8 || event.keyCode == 46) { 
 
    event.preventDefault(); 
 
    var span = document.createElement("span"); 
 
    span.setAttribute('id', 'typo' + typoNumber); 
 
    span.className = "deleted typo"; 
 
    span.setAttribute('contenteditable', 'false'); 
 
    if (window.getSelection) { 
 
     var sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     var range = sel.getRangeAt(0).cloneRange(); 
 
     range.surroundContents(span); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
     } 
 
    } 
 
    } 
 
});

/* so we can see where the spans are... */ 
 
.deleted.typo { 
 
    display: inline-block; 
 
    padding: 3px; 
 
    background: rgba(100,100,100,0.25); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Here is text to experiment with.</div>