特定のdiv内のSelect（）を取得する方法は？

私はユーザーがテキストを入力できるcontenteditable div（id 'editor1'）を持っています。次に、強調表示されたテキストの色付けを可能にする関数があります。私のjsはwindow.getSelection().getRangeAt(0)を使用していますが、この問題はdiv外の単語を強調表示でき、その色も変わることになります。これまでのところ;私が試した：特定のdiv内のSelect（）を取得する方法は？

 function red(){ 
    {  
     var getText = document.getElementById("editor1").innerHTML; 
     var selection = getText.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "red"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    } 
    }

フィドル：あなたが見ることができるように、私が強調する場合https://jsfiddle.net/xacqzhvq/

、私もそれが赤にするためにボタンを使用することができ、「これは同様に赤になるだろう」。強調表示されたテキストの色は、editor1 div内でのみ指定できますか？

出典

2016-08-04 cosmo

どのブラウザですか？クロム51でそれは動作します – avck

私は関数が動作することを知っています。私はdivの "editor1"以外のものも色を変えることはできません。下にスクロールしてください。 divの外側には、ボタンを使って赤く塗りつぶすことができるテキスト行があります。私はそれを望んでいません。私は、div内の任意のテキストを色付けできるようにしたいだけです。 – cosmo

あなたは.baseNodeを使用して選択からノード要素を取得することができます。そこから親ノードを取得し、それを比較のために使用することができます。例では

function red(){ 
    // If it's not the element with an id of "foo" stop the function and return 
    if(window.getSelection().baseNode.parentNode.id != "foo") return; 
    ... 
    // Highlight if it is our div. 
}

私はdivあなたはそれがその要素のことを確認するためにチェックすることができidを持って作られたの下：z0mBi3 @として

Demo

は、この意志を指摘しました初めての仕事です。しかし、多くのハイライト（がクリアされた場合には）が機能しないことがあります。 div内の<span>要素は、divが多くのspan要素の親要素である階層を作成します。これに対する解決策は、idが"foo"のものを見つけるまで、ノードの先祖を通過することです。

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

Here is an answer with a native JS implemented method of .closest()：

幸運なことに、あなたは自分の.closest()メソッドを使用して、あなたのためにそれを行うためにjQueryを使用することができます。

出典

2016-08-04 05:17:59

contenteditableが異なる階層に複数のタグを作成するため、あなたが身体に達するまで、parentNodeを再帰的にチェックする必要があるかもしれません。 – z0mBi3

@ z0mBi3これは単なる「ハイライト・ワンス」*のものなので、良い点です。私は、OPにjQueryの '.closest（）'関数を使うよう勧めます。私はそれを編集で言及します。 –

あなたはこのを探している、

//html 
    <body> 
    <p id='editor1'>asdf</p> 
    <button onclick='red()'> 
    RED 
    </button> 
    </body> 

    //JavaScript 

    window.red = function(){ 
     //var getText = document.getElementById("editor1").innerHTML; 
     var selection = window.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "red"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    }

Plunker：https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

出典

2016-08-04 05:01:55

私はすでに働いている機能を持っています。問題を浮き彫りにして質問を編集しました。 – cosmo

申し訳ありませんが、あなたの問題は何か分かりません。 div内とdiv外の両方を強調表示し、div内の要素のみを赤色で強調したいボタンをクリックした場合、 –

それはまさに問題です。 https：//jsfiddle.net/xacqzhvq/ – cosmo

特定のdiv内のSelect（）を取得する方法は？

答えて

関連する問題