如何用自身的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

注意：此解决方案的灵感可在网页中找到 。