jQuery tag rename alpha test

JavaScript performance comparison

Test case created by supertrue

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<h1>jQuery plugin test: Tag Renaming</h1>
<p>This is a paragraph.</p>
<p class="bold">This is a bold paragraph.</p>
<div id="bla2">
<h2>This is something else</h2>
<p id="bla" class="red">This is a red paragraph.</p>
</div>
<hr>

<a href="#" onclick="$('p').renameTag('h1');">Rename tags</a>

Preparation code output

jQuery plugin test: Tag Renaming

This is a paragraph.

This is a bold paragraph.

This is something else

This is a red paragraph.

Rename tags

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
single regexp object
 
////////////////////////////////////////////////////
// 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);

$('p').renameTagRegex('h1');
 pending…
separate regexp for opening and closing tag
 
////////////////////////////////////////////////////
// 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');
 pending…
simple replaceWith, no search
 
////////////////////////////////////////////////////
// version using jQuery .replaceWith()
// (loses attributes)
////////////////////////////////////////////////////
(function($)
    {
        $.fn.renameTagRegex=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);

$('p').renameTagRegex('h1');
 pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment