3

我有以下功能来添加带有选定文本的跨度标签。

 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”在另一个跨度内。那么我如何知道所选文本是否包含其他跨度的任何部分？

谢谢。

4

3 回答 3

3

这是一种方法，用于测试当前选择是否直接属于<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

于 2013-04-23T14:00:50.633 回答
0

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

感谢@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();
            }
于 2013-04-28T19:06:54.747 回答
-1 
var parentNode = selObj.parentNode;
if (parentNode.nodeName == "SPAN")
{
  //don't add
}
于 2013-04-23T13:56:14.847 回答