How to replace all attributes using jQuery/Javascript?

Question

I’m looking to replace every incident I have __prefix__ by a number, how to accomplish this using jQuery/Javascript?

HTML

<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div class='form-real'></div>

JS

<script>
    var clone = $('.form-modelo').clone();
    var num = 1;
    // replace __prefix__ por num
    // ex: name='form-__prefix__-nome' para name='form-1-nome'
    $('.form-real').append(clone);
</script>

Answer 1

You can use a regex to replace the string "__prefix__" by the desired number, from the HTML of the original element:

$(function() {
  var original = $('.form-modelo');
  var num = 1;
  // replace __prefix__ por num
  // ex: name='form-__prefix__-nome' para name='form-1-nome'
  var htmlNovo = $('<div>').append(original.clone()).html();
  //var htmlNovo = original.html();
  var cloneAlterado = $(htmlNovo.replace(/__prefix__/g, 1));
  $('.form-real').append(cloneAlterado);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='form-modelo'>
  <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
  <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
Clone
<div class='form-real'></div>

I know regex is less semantic, and many will say not to use regex with HTML, but the string you want to replace seems very unique... unique enough to avoid errors. In addition, if you have control over the string to be replaced, and think that errors may occur, then just use another string more unique yet... concatenate a GUID in it, I don’t know, there goes the need.

Answer 2

Using Jquery:

var num = 1;
var clone = $('.form-modelo').clone();
clone.attr('class', 'form-real');
clone.children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});
$('#form-container').append(clone);

Note: I made some changes when cloning. As it was, you were generating a .form-real inside a copy of the div .form-modelo, I believe that is not the desired result.

As it is in its original code:

<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div class='form-real'>
    <div class='form-modelo'>
        <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
        <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
    </div>
</div>

With the modifications we have a container:

<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div id='form-container'>
    <div class='form-real'>
        <input id="id_form-1-nome" name="form-1-nome" type="text">
        <input id="id_form-1-texto" name="form-1-texto" type="text">
    </div>
</div>

Amendments:

• added clone.attr('class', 'form-real'); to dynamically rename the div;
• used $('.form-real:last').append(clone); to add to the end of existing ones, if you want several numbered inputs;
• defined a #form-container to insert the Forms, if you are going to use more than one.

Demo:

var num;
for( num = 1; num <= 5; num++ ) {
  var clone = $('.form-modelo').clone();
  clone.attr('class', 'form-real');
  clone.children().each( function() {
    $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
  });
  $('#form-container').append(clone);
}

#id_form-__prefix__-nome {border:2px solid blue;}
#id_form-1-nome {border:2px solid red;}
#id_form-2-nome {border:2px solid cyan;}
#id_form-3-nome {border:2px solid green;}
#id_form-4-nome {border:2px solid orange;}
#id_form-5-nome {border:2px solid magenta;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div id='form-container'></div>

Answer 3

I suggest iterating the attributes and rewriting them:

var elements = document.querySelectorAll('.form-modelo input');
for (var i = 0; i < elements.length; i++) {
    var el = elements[i];
    el.name = el.name.split('__prefix__').join(i);
    el.id = el.id.split('__prefix__').join(i);
}

This way pieces the string by '__prefix__' and put the iteration number back together in this place.

Example: https://jsfiddle.net/d9ngmufb/

With jQuery and following your code it could be:

var clone = $('.form-modelo').clone();
var num = 1;
clone.find('input').each(function () {
    this.name = this.name.split('__prefix__').join(num);
    this.id = this.id.split('__prefix__').join(num);
});
$('.form-real').append(clone);

jsFiddle: https://jsfiddle.net/d9ngmufb/1/