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

注意： web page 中找到此解决方案的灵感。

如何用自己的innerHTML替换锚元素

2 个答案: