Question

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

例如，将跨度更新为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/

Answer 2

var div = $("div");
var html = div[0].outerHTML.replace(/div(?=>)/gi, "span");
console.log(html);
div.replaceWith(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
    <div>div within a div</div>
</div>

更改HTML标记，包括相同标记的子标记

2 个答案: