범위 내의 시작 컨테이너의 태그 이름을 가져옵니다.

Question

저는이 질문을 단순하게 용서하기 때문에 이것에 절대적인 새내기입니다. 나는 contenteditable 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의 이름표를 찾을 수 있어야한다 그림. 링크 태그가 아닌 경우 상위 태그를 쿼리합니다. 그것이 링크 태그가 아니라면 링크 태그를 찾을 때까지 계층 구조의 다음 노드에 대해 다시 쿼리하여 ID를 얻을 수 있습니다.

아주 짧기 때문에 이것은 지금까지 내가 가지고있는 모든 코드입니다. startContainer의 tagName을 찾고 싶지만 "undefined"라는 경고가 나타납니다. 내가 할 수있는 한 범위 객체에 대한 많은 문서를 읽었지만 모든 것이 흩어져 있고 이해하기가 약간 어렵다. 누구나 시작과의 contentEditable 선택의 끝의 링크 태그를 잡는 더 나은 개념 솔루션이있는 경우 그런데

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

는, 나는 훨씬 의무 것입니다.

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