使用getSelection包裝鏈接內的鏈接

我一直在盯着這個問題一段時間，並沒有設法得到一個工作的解決方案。使用getSelection包裝鏈接內的鏈接

我正在使用Rangy庫來確保對Ranges的最佳支持。

目標

作出選擇並與鏈接包裹。即使選擇是在一個鏈接。
全面選擇一個已經鏈接的選擇，並用鏈接替換它。

例

我想以下轉換，其中|作爲一個選擇範圍。

 
    link to |add a link| to

<a href="http://example.com">link to |add a link| to</a>

預計

 
    link to | add a link | to

<a href="http://example.com">link to</a> |<a href="http://example.com/pre">add a link</a>| <a href="http://example.com">to</a>

Test Expectations Plnkr

我感謝你的幫助。

更新（2013年5月15日21:37 UTC）：

我有以下

range = document.getSelection(); 
link = document.createElement('a'); 
link.href = "http://example.com/new"; 
range.surroundContents(link);

我也更新了plnkr tests

來源

2013-05-15 halfcube

你嘗試過這麼遠嗎？另外，如果選定的文本跨越多個元素的一部分會發生什麼？ –

我試過的任何東西都沒有將我提供給任何解決方案。最後一個條款將是理想的支持，我認爲它將不得不將前面的錨標籤移動到selectionEnd。 – halfcube

這顯然沒有你嘗試過的工作，否則你不會在這裏問:)請帶我們加快速度與您的嘗試，所以我們不浪費時間思考你已經嘗試過的解決方案。 –

我設法找到一個解決方案，可支持所有3種情況。

rangy.createModule('SafeWrapLink', function(api, module) { 
    var surroundSelectionWithLink; 
    surroundSelectionWithLink = (function(href) { 
    var after, afterLink, afterLinkHref, before, beforeLink, beforeLinkHref, currentLink, fullText, link, par, parNode, range, selectionText; 
    range = document.getSelection().getRangeAt(0); 
    selectionText = range.toString(); 
    if (range.commonAncestorContainer.nodeName !== "#text") { 
     beforeLinkHref = range.commonAncestorContainer.childNodes[0].getAttribute('href'); 
     afterLinkHref = range.commonAncestorContainer.childNodes[2].getAttribute('href'); 
     par = range.commonAncestorContainer; 
     parNode = par; 
    } else { 
     par = range.commonAncestorContainer.parentNode; 
     currentLink = par.getAttribute('href'); 
     parNode = par.parentNode; 
    } 
    fullText = par.innerText; 
    before = fullText.match(new RegExp("^(.*)" + selectionText))[1]; 
    after = fullText.match(new RegExp(selectionText + "(.*)$"))[1]; 

    // Build link for before selection 
    beforeLink = document.createElement('a'); 
    beforeLink.href = beforeLinkHref || currentLink; 
    beforeLink.innerText = before; 

    // Build link to insert 
    link = document.createElement('a'); 
    link.href = href; 
    link.innerText = selectionText; 

    // Build link for after selection 
    afterLink = document.createElement('a'); 
    afterLink.href = afterLinkHref || currentLink; 
    afterLink.innerText = after; 

    // Append the links in order 
    if (beforeLink.innerText.length > 0) { 
     parNode.appendChild(beforeLink); 
    } 
    parNode.appendChild(link); 
    if (afterLink.innerText.length > 0) { 
     parNode.appendChild(afterLink); 
    } 

    // remove old linking 
    if (par === range.commonAncestorContainer) { 
     par.removeChild(par.childNodes[0]); 
     return par.removeChild(par.childNodes[1]); 
    } else { 
     return parNode.removeChild(par); 
    } 
    }); 
    return api.util.extend(api, { 
    surroundSelectionWithLink: surroundSelectionWithLink 
    }); 
});

然後選擇後作出撥打以下

rangy.surroundSelectionWithLink('http://www.example.com/added');

see the tests and live code on plnkr.co

來源

2013-05-20 11:26:01 halfcube

使用getSelection包裝鏈接內的鏈接

回答

相關問題