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

Question

I'm using this previously answered question about altering an HTML tag and while trying to update some HTML tags, I'm having trouble reaching the tags within a parent of the same tag.

For example, updating a span to a div should result in:

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

But is showing up like:

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

And for reference, this is the 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);
});

Any help is greatly appreciated! Thanks!

Answer 1

A little transformation in @guest271314 solution, to avoid replace the content, only replace the HTML tags.

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

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

EDIT:

$("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>