Question

我绝对是新手，所以请原谅这个问题的简单性。我有一个满足的div。此div中的所有文本都包含在链接标记中。

如果用户进行了跨越2个或更多这些链接节点的选择，我想在startContainer和endContainer中识别链接标记的名称。

不幸的是，startContainer节点通常是一个格式化节点，如下面的示例html中所示的段落或粗体标记。

<div id="myarea" onmouseup="getSelectionHtml();" contenteditable="true">

<a id="1" href=#>text1 <b>text1 text1 </b></a>
<a id="2" href=#>text2 <b>text2 text2 </b></a>
<a id="3" href=#>text3 <b>text3 text3 </b></a>

</div>

所以我认为我的方法应该是首先找到startContainer的nameTag。如果它不是链接标记，则查询它的父节点。如果那不是链接标记，则再次查询层次结构中的下一个节点，直到找到链接标记并且可以获得它的id。

尽可能简短，这是我到目前为止的所有代码。我希望找到startContainer的tagName，但是我收到了“undefined”的警告。我一直在阅读关于范围对象的尽可能多的文档，但是这些都是分散的，我理解起来有点困难。

function getSelectionHtml() {
    var userSelection;
       if (window.getSelection) {
          userSelection = window.getSelection();        
          var selRange = userSelection.getRangeAt(0);   
              alert(selRange.startContainer.tagName);
       }

顺便说一句，如果有人有更好的概念解决方案来抓取contentEditable选择的开头和结尾的链接标记，我会非常感激。

TIA

Answer 1

范围的startContainer和endContainer属性可能是对文本节点或元素的引用。当你得到一个未定义的tagName属性时，这是因为你有一个文本节点。

这是一个简单的函数，用于获取包含节点的<a>元素：

function getAncestorWithTagName(node, tagName) {
    tagName = tagName.toUpperCase();
    while (node) {
        if (node.nodeType == 1 && node.tagName.topUpperCase() == tagName) {
            return node;
        }
        node = node.parentNode;
    }
    return null;
}

示例：

var link = getAncestorWithTagName(selRange.startContainer);
if (link) {
   alert("Start is inside link with ID " + link.id);
}

获取范围内起始容器的标记名称

1 个答案: