2

Estou querendo substituir todas ocorrências que tiver __prefix__ por um número, como realizar isso usando 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>

3 Respostas 3

5

Você pode usar uma regex para substituir a string "__prefix__" pelo número desejado, a partir do HTML do elemento original:

$(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>

Eu sei que regex é menos semântico, e muitos dirão para não usar regex com HTML, mas a string que você deseja substituir me parece bem única... única o suficiente para evitar erros. No mais, se você tiver controle sobre a string a ser substituída, e achar que podem ocorrer erros, então é só usar outra string mais única ainda... concatena uma GUID nela, sei lá, ai vai da necessidade.

1
  • Como @Bacco bem observou, se a intenção é fazer o conteúdo de .form-modelo ser convertido direto para dentro de .form-real, então ao invés de usar $('<div>').append(clone).html(); use clone.html();. Commented 26/03/2015 às 17:17
4

Usando 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);


Nota: fiz umas mudanças ao clonar. Da forma como estava, você estava gerando um .form-real dentro de uma cópia da div .form-modelo, acredito que não seja o resultado desejado.


Como está no seu código original:

<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>


Com as modificações temos um 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>

Alterações:

  • acrescentado clone.attr('class', 'form-real'); para mudar o nome da div dinamicamente;
  • usado $('.form-real:last').append(clone); para adicionar ao final de outras já existentes, caso queira vários inputs numerados;
  • definido um #form-container para inserir os forms, caso vá usar mais de um.


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>

3

Sugiro iterar os atributos e reescrevê-los:

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);
}

Desta maneira partes a string pelo '__prefix__' e voltas a juntar colocando o numero da iteração nesse lugar.

Exemplo: https://jsfiddle.net/d9ngmufb/

Com jQuery e seguindo o teu código poderia ser:

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/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .