JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<h1>jQuery plugin test: Tag Renaming</h1>
<p>This is a paragraph.</p>
<p class="bold">This is a bold paragraph.</p>
<p id="bla" class="red">This is a red paragraph.</p>

<hr>

<a href="#" onclick="$('p').renameTag('h1');">Rename tags (replaceWith version)</a>
<br>
<a href="#" onclick="$('p').renameTagRegex('h1');">Rename tags (regex .replace version)</a>
<br>
<a href="#" onclick="$('p').renameTagRegex2('h1');">Rename tags (regex .replace 2 regexp objects version)</a>

CSS

h1 { font-size: 1.5em; }

.red { color: red; }

.bold {font-weight: bold;}

JavaScript

////////////////////////////////////////////////////
// version using jQuery .replaceWith()
// (loses attributes)
////////////////////////////////////////////////////
(function($)
    {
        $.fn.renameTag=function(newTag, options)
        {
           return this.each(function()
           {
                $(this).replaceWith(function(){
                    var elem = '<'+newTag+'>'+$(this).html()+'</'+newTag+'>';
                    
                    // do something here to copy attributes?
                    // $(elem).attr();
                    
                    return elem;
                    
                });
    
           });
        };
    })(jQuery);


////////////////////////////////////////////////////
// version using regex and javascript .replace()
// (this keeps attributes)
////////////////////////////////////////////////////
    (function($)
    {
        $.fn.renameTagRegex=function(newTag, options)
        {
           return this.each(function()
           {
              var oldTag = $(this).prop('tagName');
              var regex = new RegExp('<(\/)?'+oldTag, 'gi');
               
              var outerHTML = $(this).wrap('<div></div>').parent().html();
              // console.log('Old: '+outerHTML);
               
              outerHTML = outerHTML.replace( regex, '<$1'+newTag );
              // console.log('New: '+outerHTML);
               
              $(this).replaceWith( outerHTML );
    
           });
        };
    })(jQuery);


////////////////////////////////////////////////////
// version using regex and javascript .replace()
// (this keeps attributes)
////////////////////////////////////////////////////
    (function($)
    {
        $.fn.renameTagRegex2=function(newTag, options)
        {
           return this.each(function()
           {
              var oldTag = $(this).prop('tagName');
              var regex1 = new RegExp('^<'+oldTag, 'gi');
              var regex2 = new RegExp('<\/'+oldTag+'>$',...