選択したテキストが親を埋めるかどうかを知る方法？

Question

私はHtmlエディタを持っており、選択したテキストが親を満たしているか親が他のコンテンツを持っているかどうかを知りたい。

<div>Hi this is <span>balh balh</span></div> 

は、ユーザーがblah blahまたはHi this is balh balhフレーズを選択trueにする必要がありますチェックして、ユーザーがis blah blahフレーズを選択すると、その後falseでなければならないチェック：エディタツールで作成されたこのHTMLを想定 。 私は以下のコードを書いています。

$('#getSelection').click(function(){ 
 
    var father = $(window.getSelection().focusNode.parentNode); 
 
    var hasFather = father[0].innerText === window.getSelection().toString(); 
 
    alert(hasFather); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Hi this is <span>balh balh</span></div> 
 
<input type="button" id="getSelection" value="Get Selection"/>

しかし、生成されたHTMLが複雑に得るとき、それは働いていません。あなたの親ノードが変更された

$('#getSelection').click(function(){ 
 
    var father = $(window.getSelection().focusNode.parentNode); 
 
    var hasFather = father[0].innerText === window.getSelection().toString(); 
 
    alert(hasFather); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="editable" contenteditable="TRUE" style="padding: 0px; color: rgb(0, 0, 0); font-family: Yekan; font-size: 12px; line-height: 20px; text-align: center; outline: -webkit-focus-ring-color auto 5px; border-color: rgb(204, 204, 204);"><div style="text-align: center;"><span style="font-style: italic; font-weight: bold; text-decoration: underline;"></span><span style="font-size: 13px;"><span style="font-size: 14px;"><span style="font-style: italic; font-weight: bold; text-decoration: underline;">blah blah blah blah blah </span><span style="font-style: italic; font-weight: bold;">blah </span><span style="font-style: italic; font-weight: bold; text-decoration: underline;">blah blah blah </span><span style="font-style: italic; font-weight: bold;">blah blah blah blah blah</span><span style="font-style: italic; font-weight: bold; text-decoration: underline;"> blah blah blah blah</span></span></span><span style="font-style: italic; font-weight: bold; text-decoration: underline;"></span></div></div> 
 
<input type="button" id="getSelection" value="Get Selection"/>

Answer 1

：この矛盾したサンプルを（完全にテキストを選択）を参照してください。親ノードの数が増えると、それに応じてコードを変更する必要があります。以下の実施例;

$('#getSelection').click(function(){ 
 
    var father = $(window.getSelection().focusNode.parentNode); 
 
    var hasFather = father[0].parentNode.innerText === window.getSelection().toString() || father[0].innerText === window.getSelection().toString(); 
 
    alert(hasFather); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="editable" contenteditable="TRUE" style="padding: 0px; color: rgb(0, 0, 0); font-family: Yekan; font-size: 12px; line-height: 20px; text-align: center; outline: -webkit-focus-ring-color auto 5px; border-color: rgb(204, 204, 204);"><div style="text-align: center;"><span style="font-style: italic; font-weight: bold; text-decoration: underline;"></span><span style="font-size: 13px;"><span style="font-size: 14px;"><span style="font-style: italic; font-weight: bold; text-decoration: underline;">blah blah blah blah blah </span><span style="font-style: italic; font-weight: bold;">blah </span><span style="font-style: italic; font-weight: bold; text-decoration: underline;">blah blah blah </span><span style="font-style: italic; font-weight: bold;">blah blah blah blah blah</span><span style="font-style: italic; font-weight: bold; text-decoration: underline;"> blah blah blah blah</span></span></span><span style="font-style: italic; font-weight: bold; text-decoration: underline;"></span></div></div> 
 
<input type="button" id="getSelection" value="Get Selection"/>

Answer 2

選択の親ノードをチェックするときに代わりにfocusNodeのanchorNodeを使用してみてください。

focusNode.parentNodeは、選択が終了する要素を示します。

$('#getSelection').click(function(){ 
 
    
 
    var selection = window.getSelection(); 
 
    
 
    if (selection.focusNode !== null) { 
 
    var parent = $(window.getSelection().anchorNode.parentNode); 
 
    //console.log("parent is ->", parent[0]) 
 
    var isParent = parent[0].innerText === window.getSelection().toString(); 
 
    //console.log(window.getSelection()) 
 
    alert(isParent); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Hi this is <span>balh balh</span></div> 
 
<input type="button" id="getSelection" value="Get Selection"/>