如果包含元素，js会阻止选择包装

Question

我有以下代码在span中包装所选文本：

if (window.getSelection) {
                text = window.getSelection();
                if (text.rangeCount) {
                    if(text==""||text.toString().trim() == ""||text.anchorNode.parentNode.nodeName=="SPAN"){return false;}
                    var range = text.getRangeAt(0).cloneRange();
                    range.surroundContents(span);
                    text.addRange(range);
                    text.removeAllRanges();
                }
            }

使用以下参数我成功阻止了两次包装相同的选择：

if(text.anchorNode.parentNode.nodeName=="SPAN"){return false;}

但是，如果我在跨度周围选择更大部分的文本，它仍会包裹它。有没有办法可以检查天气我的选择中包含一个span元素并根据它返回false？

Answer 1

您可以使用String.indexOf（）函数来确定文本中是否有span元素。

if( text.indexOf("<span") > -1 ){return false;}

Answer 2

在span行之前创建range.surroundContents(span)的位置？

这为我解决了这个问题：

var newSpan = document.createElement('span');
range.surroundContents(newSpan);

这是添加上述行后的DOM的屏幕截图，然后按照描述选择一些文本：

编辑以下是评论中澄清的更新代码。

  /**
   * This line will check if the selected text is already inside a <span>
   * ----------------------------------------------------------------------
   * text.anchorNode.parentNode.nodeName === 'SPAN'
   *
   * This line will check if the selected text contains a <span> within it
   * ----------------------------------------------------------------------
   * text.anchorNode.parentNode.querySelector('span') !== null
   * 
   */

  if( text === '' || text.toString().trim() === '' || text.anchorNode.parentNode.querySelector('span') !== null) { 
    console.log('<span> inside selection - returning'); 
    return false; 
  }