0

我在这方面绝对是新手，所以请原谅这个问题的简单性。我有一个内容可编辑的 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，但我收到“未定义”的警报。我一直在尽可能多地阅读有关 range 对象的文档，但这些文档都很分散，我有点难以理解。

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

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

蒂亚

4

1 回答 1

3

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

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

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

例子：

var link = getAncestorWithTagName(selRange.startContainer);
if (link) {
   alert("Start is inside link with ID " + link.id);
}
于 2013-02-11T09:50:56.077 回答