Получить имя тега начального контейнера в диапазоне

Question

Я абсолютный новичок в этом, так что простите за этот вопрос. У меня есть спорный див. Весь текст в этом 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>

Поэтому я считаю, что мой подход должен сначала найти nameTag startContainer. Если это не тег ссылки, запросите его родительский узел. Если это не тег ссылки, выполните запрос еще раз для следующего узла вверх по иерархии, пока я не найду тег ссылки и не смогу получить его идентификатор.

Как ни печально, но это весь код, который у меня есть. Я хочу найти tagName для startContainer, но я получаю предупреждение "undefined". Я читал столько документации по объекту диапазона, сколько смогу, но он разбросан и немного сложен для понимания.

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

Кстати, если у кого-то есть лучшее концептуальное решение для захвата тега ссылки начала и конца выбора contentEditable, я был бы очень признателен.

ТИА

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);
}