Javascript 如何用锚元素本身的innerHTML替换锚元素

我尝试编写一个基于JavaScript的脚本，用它的内部HTML替换当前选定的锚元素

您还可以在中找到一个简单的跑步示例。要运行该示例，请单击第一个链接，然后单击按钮

例如，如果我有以下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>

到目前为止，一切都是正确的，这是更换链接的迹象。我尝试了上面的代码，但得到的结果如下：

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

Wawef awef替换mefalwkefi4hjtinyoh gf waf eerngl
nregsl ngsekdng selrgnlrekg SLEKNGSELRG NSERG替换me klserng sreig klrewr

我的意思是锚定被替换为内部HTML的文本形式，而不是内部HTML的HTML形式

---

所以问题是，我如何进行这种替换。

您正在创建一个文本节点，因此您在其中输入的任何内容都将被解释为文本。相反，因为预定义了替换标记，所以应该创建实际的DOM元素来替换它。类似的方法可能会奏效：

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);

---

答案比我想的简单得多。我在下面为需要等效解决方案的任何人提供了解决方案：）：

您可以在这里找到正在运行的解决方案：

---

注意：此解决方案的灵感来源于。

好的，谢谢您的回复，但是，如何自动执行上述代码？我的意思是，一个锚定链接可以包含许多其他子元素，那么，我如何为未知数量的子元素执行示例代码呢？好的，您可以使用正则表达式来查看其中有哪些标记。类似于

//gi

的东西可能会用于此目的。您可以使用相反的方法来查找元素内容：

/>.*？这里是-我知道这可能不是您正在寻找的优雅解决方案，但这是我所知道的最好的解决方案。我将在几分钟后发布一些示例代码。这是我到目前为止的高尔夫测试的一部分。很糟糕，但我现在没有时间清理。但概念是相同的-即使使用了该代码，如果您稍微清理一下数组（去掉“>”和“
Wawef awef <em>replace</em> <strong>me</strong> falwkefi4hjtinyoh gf waf eerngl 
nregsl ngsekdng selrgnlrekg slekngs ekgnselrg nselrg replace me klserng sreig klrewr

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);

$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;
    }
);