JavaScript内で選択されたテキストが完全にノード内

Question

JavaScriptのテキスト選択と範囲を調べています。

私には、例えば、正確に選択されたテキストを囲む任意のノードを取得する必要があります：ユーザーが「いくつかの単純な」私はそれが完全にノード内に位置することを知っておく必要がある単語を選択すると

<div>this is <span>some simple</span> text</div> 

を。 しかし、「some」だけを選択すると、「simple」という単語が選択されていないため、これはノード内に完全にはありません。

ノード内のテキスト全体が選択されている場合にのみ、ノードのクラスを修正することができます。

jqueryも実行可能です。ありがとう

これにいくつかのコンテキストを追加するには、ユーザーがテキストをいくつか選択したときにそれに何かを追加すると、「太字」と言いましょう。ユーザは親div内のテキストを所望の頻度で編集して、各編集が選択されたテキストを囲む新しいスパンを追加できるようにすることができる。私たちはこのようなもので終わる可能性があります：

<div><span class="text-bold">Hi</span>, <span class="text-red">this <span class="text-italic">is</span></span> a sample text item</div> 

したがって、スパンはユーザーが望むものに依存しています。

Answer 1

おかげで、それは私が一緒に私の解決策を考え出すを許可：

function applyTextFormatClass(className) { 
     var selection = getSelected(); 
     var parent = selection.getRangeAt(0).commonAncestorContainer; //see comment and link below 
     if (parent.nodeType !== 1) { 
      parent = parent.parentNode; //we want the parent node 
     } 
     var tagText = parent.innerText; 
     var selectText = selection.toString(); 

     if (tagText.length !== selectText.length) { 
      addNodeAroundSelectedText(selection, className); //create new node 
     } else { 
      addClass(parent, className); //add class to existing node 
     } 
    } 

commonAncestorContainer：https://developer.mozilla.org/en-US/docs/Web/API/Range/commonAncestorContainer

Answer 2

あなたは毎回DOMを探しています。だからあなたはHTML Element Objectsにidを設定し、それらから値を得ることができます。たとえば：x値は、ユーザが選択した値に等しい場合

<span id="f_span">some simple</span> 

<script> 
    var x = document.getElementById("f_span"); 
</script> 

次に、あなたがチェックすることができます。

Answer 3

setIntervalを使用すると、選択したテキストを毎秒取得できます。結合された関数を使用すると、選択したテキストを取得できます。利用者の選択のため

：

function getSelected() { 
    if(window.getSelection) { return window.getSelection(); } 
    else if(document.getSelection) { return document.getSelection(); } 
    else { 
     var selection = document.selection && document.selection.createRange(); 
     if(selection.text) { return selection.text; } 
     return false; 
    } 
    return false; 
} 

それはあなたの選択のオフセットを与えるオブジェクトを返します。 result.anchorOffset = 0とresult.focusOffset = result.anchorNode.length（ノードの先頭から開始し、ノード全体の長さがある場合）、ユーザーはすべてのノードを選択します。あなたの返信用