JavaScrippt如何從選定文本中提取鏈接

我在尋找解決方案如何使用window.getSelection和document.selection從選定文本中提取網址。JavaScrippt如何從選定文本中提取鏈接

文本選擇看起來是：

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

選擇文本（由用戶選擇）提取鏈接：

選項1（包括標籤之間的文字和文字）：

Ipsum is simply dummy text of

選項2（選擇文本和鏈接片段）：

Ipsum is simply

該功能應該返回http://example.com

來源

2013-08-24 kicaj

很難寫出跨瀏覽器的功能。見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/

來源

2013-08-26 04:46:20 tokkonopapa

哦，幾乎相同的回答中可以找到[如何獲得選擇使用JavaScript的HTML文本？]（http://stackoverflow.com/questions/5643635/how-對獲得選擇-HTML的文本與JavaScript的）。 – tokkonopapa

它的工作很好，但有一個問題：當只選擇鏈接或鏈接片段時，返回空值 – kicaj

如果我誤解了這個問題，我很抱歉，但這裏是我的建議。

有一個函數並將它傳遞給選定的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; 
}

我希望有幫助！

來源

2013-08-26 00:56:27 TheCrzyMan

JavaScrippt如何從選定文本中提取鏈接

回答

相關問題