如何用自身的innerHTML替換錨元素

Question

我嘗試編寫基於JavaScript的腳本，用其內部HTML替換當前選擇的錨元素。

您還可以在JSFiddle中找到一個簡單的運行示例。 要運行該示例，請單擊第一個鏈接，然后單擊按鈕。

因此，例如，如果我具有以下HTML：

<p>
    Wawef awef <a href="http://www.somesite.com/"><em>replace</em> <strong>me</strong></a>
    falwkefi4hjtinyoh gf waf eerngl nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg 
    <a href="http://www.anothersite.com/>replace me</a> klserng sreig klrewr
</p>

並且我喜歡單擊兩個錨點中的一些以將錨點與其內部HTML一起刪除。 這意味着，如果我單擊第一個錨元素，然后單擊相應的按鈕以替換錨，則結果應為：

<p>
    Wawef awef <em>replace</em> <strong>me</strong> falwkefi4hjtinyoh gf waf eerngl 
    nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg <a href="http://www.anothersite.com/>replace me</a>
    klserng sreig klrewr
</p>

我針對此功能的JavaScript代碼如下：

// Start tracking the click event on the document
document.addEventListener(
    'click',
    function(event)
    {
        // If right click, return
        if(event.button == 2)
        {
            return;
        }

        // Get the current clicked document element
        var link    =   event.target;

        while(link && !(link instanceof HTMLAnchorElement))
        {
            link    =   link.parentNode;
        }

        // Get the element with ID wpf-remove-element-now
        var clickedLink =   document.getElementById("wpf-remove-element-now");

        // If the element exists
        if(clickedLink !== null)
        {
            // By executing this code, I am ensuring that I have only
            // one anchor element in my document with this ID

            // Remove the id attribute
            clickedLink.removeAttribute('id');
        }

        // If ther is no link element
        if(!link)
        {
            // Disable my "unlink" button
            editor.commands.customunlinkcmd.disable();
            // and return
            return;
        }

        event.preventDefault();
        event.stopPropagation();

        // If the user has clickde on an anchor element then
        // enable my "unlink" button in order to allow him to
        // to replace the link if he like to.
        editor.commands.customunlinkcmd.enable();

        // Set the id attribute of the current selected anchor
        // element to wpf-remove-element-now
        link.setAttribute('id', 'wpf-remove-element-now');
    }
);

var $unlink_button = document.getElementById('unlink');

$unlink_button.addEventListener(
    'click',
    function(event)
    {
        // Get the element with ID wpf-remove-element-now
        var link    =   document.getElementById("wpf-remove-element-now");
        // Create a new text node that contains the link inner HTML
        var text    =   document.createTextNode(link.innerHTML);

        // Make the replacement
        link.parentNode.replaceChild(text, link);
    }
);

到目前為止，所有內容都是正確的，請替換鏈接。 我已經嘗試了上面的代碼，但是得到的結果類似於以下代碼：

Wawef awef <em>replace</em> <strong>me</strong> falwkefi4hjtinyoh gf waf eerngl 
nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg replace me klserng sreig klrewr

我的意思是將錨替換為內部HTML的文本形式，而不是內部HTML的HTML形式。

所以問題是，我該怎么做這種替換。

Answer 1

您正在創建一個文本節點，因此無論您在其中放置什么內容，都將被解釋為文本。 相反，由於您已預定義了替換標簽，因此應創建實際的DOM元素來替換它。 這樣的事情可能會起作用： JSFiddle

var em_elem = document.createElement('em');
em_elem.appendChild(document.createTextNode("replace"));

var strong_elem = document.createElement('strong');
strong_elem.appendChild(document.createTextNode("me"));

var container_span = document.createElement('span');
container_span.appendChild(em_elem);
container_span.appendChild(strong_elem);

// Make the replacement
link.parentNode.replaceChild(container_span, link);

Answer 2

我認為答案要簡單得多。 我將解決方案放在下面的任何需要相同解決方案的人:)：

$unlink_button.addEventListener(
    'click',
    function(event)
    {
        // Get the element with ID wpf-remove-element-now
        var link          =    document.getElementById("wpf-remove-element-now");

        // By this code you replace the link outeHTML (the link itself) with
        // the link innerHTML (anything inside the link)
        link.outerHTML    =    link.innerHTML;
    }
);

在這里您可以找到正在運行的解決方案： JSFiddle

注意：此解決方案的靈感可在網頁中找到 。