Question

我有一个Html编辑器，我想知道所选文本是填充父母还是父母有其他内容。假设使用编辑器工具创建此HTML：

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

当用户选择blah blah或Hi this is balh balh词组时，请检查true，当用户选择is blah blah词组时，请检查false。我写了下面的代码，它已经有效了。

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

但是当生成的HTML变得复杂时，它无法正常工作。看到这个矛盾的样本（完全选择文本）：

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

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显示选择结束的元素。

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

如何知道所选文本是否填充了父母？

2 个答案: