Question

我有以下功能来添加带有选定文本的span标记。

 function Add() {
    var selObj = window.getSelection();
    var selRange = selObj.getRangeAt(0);
    var newElement = document.createElement("span");
    newElement.setAttribute("class", "cls1");
    var documentFragment = selRange.extractContents();
    newElement.appendChild(documentFragment);
    selRange.insertNode(newElement);
    selObj.removeAllRanges();
}

工作正常。但我想阻止在另一个内部添加新的跨度。

    <a href="#" onclick="Add()">Add Span</a>
    <div id="content">
        Lorem ipsum dolor sit amet, <span class="cls1">consectetur adipisicing</span> elit,
    </div>

如果用户选择“adipisicing elit”，我不想创建新的跨度，因为“adipisicing”在另一个内部。 那么我怎么知道所选文本是否包含其他跨度的任何部分？

感谢。

Answer 1

这是一种方法，用于测试当前选择是直接 <span class="cls1">的一部分。您可以在函数的第一行之后添加它，因为它使用selObj作为起点。

if ("cls1"!==selObj.anchorNode.parentNode.className) {

如果必须是跨度：

if ("span"!==selObj.anchorNode.parentNode.tagName.toLowerCase()) {

要确保选择的两个结尾都在一个范围之外，请同时使用focusNode：

if ("span"!==selObj.anchorNode.parentNode.tagName.toLowerCase() && ("span"!==selObj.focusNode.parentNode.tagName.toLowerCase()) {

结合一切：

if ("cls1"!==selObj.anchorNode.parentNode.className && "span"!==selObj.anchorNode.parentNode.tagName.toLowerCase() && "cls1"!==selObj.focusNode.parentNode.className && "span"!==selObj.focusNode.parentNode.tagName.toLowerCase()) {

http://jsfiddle.net/mblase75/Zg5LW/

https://developer.mozilla.org/en-US/docs/DOM/Selection/anchorNode

https://developer.mozilla.org/en-US/docs/DOM/Selection/focusNode

Answer 2

最后我想出了如何实现这一目标。总结一下，我需要检查一下：
1.选择是否在特定类（＆＃34; cls1＆＃34;）元素内 2.选择是否包含一个或多个特定类（＆＃34; cls1＆＃34;）元素 3.选择是否包含特定类（＆＃34; cls1＆＃34;）元素的某些部分。

感谢@ Blazemonger的代码，我可以实现1.和3.项目：

  if ("cls1" == selObj.anchorNode.parentNode.className || "cls1" ==                selObj.focusNode.parentNode.className)
            { return true; }

两个我添加了以下部分，检查2.和3.项目：

              var docFrag = selRange.cloneContents();
              var childNodes = docFrag.childNodes;
              for (var i = 0; i < childNodes.length; i++) {
                 var nodee = childNodes[i];
                 if ($(nodee).hasClass("cls1") || $(nodee).find(".cls1").length > 0)
                  {  return true; }
}

所以我写了一个结合两者的检查功能：

function ContainsDiv(selRange)
{

           var docFrag = selRange.cloneContents();
           var childNodes = docFrag.childNodes;
           for (var i = 0; i < childNodes.length; i++) {
              var nodee = childNodes[i];
              if ($(nodee).hasClass("cls1") || $(nodee).find(".cls1").length > 0)
                {  return true; }

              if ("cls1" == selObj.anchorNode.parentNode.className || "cls1" ==                selObj.focusNode.parentNode.className)
                { return true; }

}

我在Add（）中使用了这个函数：

function Add() {
                var selObj = window.getSelection();
                var selRng = selObj.getRangeAt(0);
                if (ContainsDiv(selRng)) {
                    return;
                }
                var newElement = document.createElement("span");
                newElement.setAttribute("class", "cls1");
                var documentFragment = selRng.extractContents();
                newElement.appendChild(documentFragment);
                selRng.insertNode(newElement);
                selObj.removeAllRanges();
            }

Answer 3

var parentNode = selObj.parentNode;
if (parentNode.nodeName == "SPAN")
{
  //don't add
}

如何确保所选文本不包含特定标记/类

3 个答案: