How can I change HTML attribute names with jQuery?

There is no built-in method/function to "rename" an attribute in javascript, but you can create new attributes and remove other ones...

$('a.testingCase[title]').each(function() {
  var $t = $(this);
  $t.attr({
      newTitleName: $t.attr('title')
    })
    .removeAttr('title');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="testingCase" href="#" title="name of testing case">Blabla</a>
<a class="testingCase" href="#" title="name of another testing case">Bloo</a>

Edit: added in the bit that makes it only select a elements with class="testingCase"

I don't think you can change an attribute name but what you can do is :

• get all the <a> tags with a title attribute;
• foreach of them, create a newTitleName attribute with the same value as the title;
• then delete the title attribute.

JQuery let you do that with builtin functions this way :

/* get all <a> with a "title" attribute that are testingCase
then apply an anonymous function on each of them */

$('a.testingCase[title]').each(function() {   

    /* create a jquery object from the <a> DOM object */
    var $a_with_title = $(this);    

    /* add the new attribute with the title value */
    $a_with_title.attr("newTitleName", $a_with_title.getAttribute('title'));

    /* remove the old attribute */
    $a_with_title.removeAttr('title'); 

});

A little later but this link has a great jquery function extension:

jQuery.fn.extend({
  renameAttr: function( name, newName, removeData ) {
    var val;
    return this.each(function() {
      val = jQuery.attr( this, name );
      jQuery.attr( this, newName, val );
      jQuery.removeAttr( this, name );
      // remove original data
      if (removeData !== false){
        jQuery.removeData( this, name.replace('data-','') );
      }
    });
  }
});

Example

// $(selector).renameAttr(original-attr, new-attr, removeData);
 
// removeData flag is true by default
$('#test').renameAttr('data-test', 'data-new' );
 
// removeData flag set to false will not remove the
// .data("test") value
$('#test').renameAttr('data-test', 'data-new', false );

I DID NOT WRITE THIS. BUT I DID TEST IS WITH JQ 1.10. THE CODE IS FROM THE LINK.

Here's a simple jquery-style plugin that gives you a renameAttr method:

// Rename an entity attribute
jQuery.fn.renameAttr = function(oldName, newName) {
    var args = arguments[0] || {}; 
    var o = $(this[0]) 

       o
        .attr(
            newName, o.attr(oldName)
        )
        .removeAttr(oldName)
        ;
};

There is also this example which adds an option to remove the data for the old attribute.

One liner

$('selector').replaceWith($('selector')[0].outerHTML.replace("oldName=","newName="));

worked great for me when I needed to strip a prefix from all of my attributes

$('selector').replaceWith($('selector')[0].outerHTML.(/prefix\-/g,""));

<input class="form-control" type="date" value="<?=$arRes["FORM"]["STAT"]?>" name="STAT" <?=($arRes["MIN_DATE"]) ? "min='".$arRes["MIN_DATE"]."'" : "" ?> <?=($arRes["MAX_DATE"]) ? "max='".$arRes["MAX_DATE"]."'" : "" ?>>

$(document).on("change", "#chek_min_max", function(event){
            var input_field = $("[name=STAT]");
            if(event.target.checked){
                input_field.attr("min", input_field.attr('data-min')).removeAttr('data-min');
                input_field.attr("max", input_field.attr('data-max')).removeAttr('data-max');
            }
            if(!event.target.checked){
                input_field.attr("data-min", input_field.attr('min')).removeAttr('min');
                input_field.attr("data-max", input_field.attr('max')).removeAttr('max');
            }
        });

same answer as @nickf but cleaner code:

$('a.testingCase[title]').each(function() {
    var curElem = $(this);
    curElem.attr("newTitleName", curElem.attr('title')).removeAttr('title');
});

It works for me!

$('input[name="descricao"]').attr('name', 'title');