javascript - 更改 HTML 标签，包括相同标签的子标签

Question

我正在使用这个 previously answered question关于更改 HTML 标记并在尝试更新某些 HTML 标记时，我无法访问同一标记的父标记中的标记。

例如，将 span 更新为 div 应该导致:

<div>
    <div>div within a div</div>
</div>

但显示为:

<div>
    <span>div within a div</span>
</div>

作为引用，这是 js:

var divTag = 'div';

$('span').each(function() {
    var outer = this.outerHTML;

    // Replace all span tags with the type of divTag
    var regex = new RegExp('<' + this.tagName, 'i');
    var newTag = outer.replace(regex, '<' + divTag);

    // Replace closing tag
    regex = new RegExp('</' + this.tagName + '>$', 'i');
    newTag = newTag.replace(regex, '</' + divTag + '>');

    $(this).replaceWith(newTag);
});

非常感谢任何帮助!谢谢!

Answer 1

在@guest271314的解决方案中做了一点改造，避免替换内容，只替换HTML标签。

var div = $("div");
var html = div[0].outerHTML.replace(/<div/g, "<span");
div.replaceWith(html);

fiddle :https://jsfiddle.net/lmgonzalves/31c5bebx/1/

编辑:

$("div").each(function(){
    var html = $(this)[0].outerHTML.replace(/<div/g, "<span");
    $(this).replaceWith(html);
});

fiddle :https://jsfiddle.net/lmgonzalves/31c5bebx/5/