JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

Why the error in http://jsperf.com/jquery-tag-rename-alpha-test?
<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').renameTagRegex('h1');">Rename tags (regex .replace version)</a>

CSS

h1 { font-size: 1.5em; }

.red { color: red; }

.bold {font-weight: bold;}

JavaScript

////////////////////////////////////////////////////
// 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 regex1 = new RegExp('^<'+oldTag, 'gi');
              var regex2 = new RegExp('<\/'+oldTag+'>$', 'gi');
               
              var outerHTML = $(this).wrap('<div></div>').parent().html();
              // console.log('Old: '+outerHTML);
               
              outerHTML = outerHTML.replace( regex1, '<'+newTag );
              outerHTML = outerHTML.replace( regex2, '</'+newTag+'>' );
              // console.log('New: '+outerHTML);
               
              $(this).replaceWith( outerHTML );
    
           });
        };
    })(jQuery);


// $('p').renameTagRegex('h1');