如何知道选定的文本是否填满了父项？

Question

我有一个Html编辑器，我想知道选定的文本是否填满了父代或父代有其他内容。 想这与HTML编辑器工具创建：

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

当用户选择blah blah或Hi this is balh balh短语，则必须检查true，当用户选择is blah blah短语，则必须检查false。 我写了下面的代码它的工作。

$('#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

试图为选择的父节点检查时使用anchorNode代替focusNode。

请记住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"/>