JavaScrippt 선택한 텍스트에서 링크를 추출하는 방법

Question

window.getSelection 및 document.selection을 사용하여 선택한 텍스트에서 URL을 추출하는 방법을 찾는 해결책이 있습니다.

텍스트는 모양 선택 :

<p>Lorem Ipsum is <a href="http://example.com">simply <b>dummy</b> text</a> of the printing and typesetting industry.</p> 

선택한 텍스트 링크를 추출하기 위해 (사용자가 선택한) :

옵션 1의 (a 태그 사이에 텍스트와 텍스트를 포함) :

Ipsum is simply dummy text of 

을

옵션 2 (텍스트 및 링크 단편 선택) :

Ipsum is simply 

함수를 반환해야합니다. http://example.com

Answer 1

브라우저 간 기능을 위해 작성하기가 어렵습니다. How to bind a handler to a selection change on window?을 참조하십시오.

mousedown, mouseup, touchstart, touchend과 같은 이벤트를 캡처해야합니다. 이러한 이벤트의 조합은 좋을 수도 있습니다.

function addEvent(elem, event, func) { 
    if (elem.addEventListener) { 
     elem.addEventListener(event, func, false); 
    } else { 
     elem.attachEvent('on' + event, func); 
    } 
} 

다음 window.getSelection 또는 document.selection를 사용 getSelectedHTML()이다.

function getSelectedHTML(event) { 
    // http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html 
    var range = window.getSelection ? window.getSelection() /* W3C */ 
    : document.getSelection ? document.getSelection() /* redundant? */ 
    : document.selection ? document.selection.createRange() /* IE */ 
    : null; 

    if (range) { 
     if (range.getRangeAt) { 
      range = range.getRangeAt(0); 
     } else if (range.setStart) { // Safari 1.3 
      // Create range by itself 
      range.setStart(range.anchorNode, range.anchorOffset); 
      range.setEnd(range.focusNode, range.focusOffset); 
     } else { 
      // IE is already reange 
     } 

     var html = null, link = null; 
     if (range.cloneContents) { 
      var dummy = document.createElement('div'); 
      dummy.appendChild(range.cloneContents()); 
      html = dummy.innerHTML; 
     } else { 
      html = range.htmlText; /* IE */ 
     } 

     if (html) { 
      link = html.match(/<a.*?href\s*?=['"](.*?)['"]/); 
      return link ? link[1] : null; 
     } 
    } 

    return null; 
} 

이 코드는 특히 이전 브라우저에서 확인해야합니다. 여기

샘플 바이올린입니다 : http://jsfiddle.net/tokkonoPapa/CQ63a/

Answer 2

질문을 오해 한 경우 미안하지만 여기에 제 제안이 있습니다.

함수가 있고 선택한 HTML을 전달하고 다음과 같이 처리해야합니다.

function FindLink(str){ 
    // str='<p>Lorem Ipsum is <a href="http://example.com">simply <b>dummy</b> text</a> of the printing and typesetting industry.</p>'; 

    // we get the index of the beginning of the <a> tag 
    var n = str.indexOf("<a") ; 

    // we find the href property of the <a> element, starting from the <a we found 
    var n2 = str.indexOf("href=\"", n) + 6; 

    // we find the end of the href property 
    n3 = str.indexOf("\">",n2); 

    // we find the substring starting at the beginning of the link and going for however many characters the link is 
    link = str.substr(n2,n3-n2); 

    return link; 
} 

도움이 되었기를 바랍니다.