javascript - 如何知道所选文本是否已填充父级？

Question

我有一个 Html 编辑器，我想知道所选文本是否已填充父项或父项是否有其他内容。假设使用编辑器工具创建的 HTML:

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

当用户选择blah blah或Hi this is balh balh短语时，检查必须为true并且当用户选择是 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"/>