jQueryで取得したオブジェクトの置き換え

Question

前提・実現したいこと

jQueryで取得したオブジェクトの一部の要素を置き換えしたいです。
※以下は「bar1」を「bar2」に置き換えしたい場合です。

<div class="hoge">
	<div class="foo">
		<input type="text" name="bar1" value="">
		<input type="text" name="bar1_text" value="">
		<textarea name="bar1_area"></textarea>
	</div>
</div>
<a href="#" class="btn">複製</a>

このようなHTMLがあった場合に「複製」ボタンを押すと

<div class="hoge">
	<div class="foo">
		<input type="text" name="bar1" value="">
		<input type="text" name="bar1_text" value="">
	<textarea name="bar1_area"></textarea>
	</div>
	<div class="foo">
		<input type="text" name="bar2" value="">
		<input type="text" name="bar2_text" value="">
		<textarea name="bar2_area"></textarea>
	</div>
</div>
<a href="#" class="btn">複製</a>

となるようにしたいです。

試したこと

replaceメソッドを使ってみましたが、TypeErrorがでて動きませんでした。
同じものをコピーするまでは以下でできたのですが・・・

$('.btn').click(function(){
	var dom = $('.hoge .foo:last').clone(true);
	dom.insertAfter('.hoge .foo:last');
	// 以下だとエラー
	// dom.replace('bar1', 'bar2').insertAfter('.hoge .foo:last');
});

■エラーコード

Uncaught TypeError: dom.replace is not a function
at HTMLSpanElement.<anonymous> (hoge.php)
at HTMLSpanElement.dispatch (jquery.min.js:3)
at HTMLSpanElement.r.handle (jquery.min.js:3)

良い方法があれば、ご教授いただきたいです。
よろしくお願いします。

回答および質問ありがとうございました。
どちらの方法を採用するか、または参考にさせて頂いて解決するか現在はわかりませんので、先にご回答いただいた方をベストアンサーにさせて頂きました。
ありがとうございました。

Comments

[m.ts10806]

cloneのほうはどうだったのでしょうか。

[rjunakc]

早速ありがとうございます。
試したことの3行目は正常に動作して同じものが複製されています。
3行目をコメントアウトした5行目と入れ替えるとエラーで止まってしまいます。

[m.ts10806]

それぞれエラー全文ご提示いただけますか？

[rjunakc]

Uncaught TypeError: dom.replace is not a function
at HTMLSpanElement.<anonymous> (hoge.php)
at HTMLSpanElement.dispatch (jquery.min.js:3)
at HTMLSpanElement.r.handle (jquery.min.js:3)

[m.ts10806]

質問編集して追記いただければと

[m.ts10806]

dom.insertAfter('.hoge .foo:last');
↑こちらはエラー出てないのですか？

[rjunakc]

エラーは出ていないです。

Answer 1

地道に変換するしかないです

    dom.find('[name^="bar"]').each(function(_index, element) {
      element.name = element.name.replace(/bar(\d+)/, function(_m, p) {
        return 'bar' + (parseInt(p, 10) + 1).toString();
      });
    });

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

-- 全属性対象版追記

    dom.find('*').each(function(_index, element) {
      $.each(element.attributes, function(_index, attribute) {
        element.setAttribute(attribute.name, attribute.value.replace(/bar(\d+)/, function(_m, p) {
          return 'bar' + (parseInt(p, 10) + 1).toString();
        }));
      });
    });

https://developer.mozilla.org/ja/docs/Web/API/Element/attributes

Comments

[rjunakc]

ありがとうございます。
「name^="bar"」以外にも「id=""」や「data-xxx=""」なども置き換えしたいのですが、そのパターン分ご提示のコードを書く必要がありますかね・・・やっぱり。

[rjunakc]

ありがとうございます。
色々参考になりました。
もう一人の回答者の方の回答も参考にしながら、要件を満たすように作ってみます。
色々とご教授下さりありがとうございました。

Answer 2

こんな感じで

<script>
$(function(){
  $('.btn').on('click',function(){
    var c=$('.hoge:eq(0)').clone();
    var bar='bar'+($('.hoge').length+1).toString();
    c.find('input:eq(0)').attr('name',bar).val("");
    c.find('input:eq(1)').attr('name',bar+'_text').val("");
    c.find('textarea').attr('name',bar+'_area').val("");
    $(this).before(c);
  });
});
</script>

<div class="hoge">
    <div class="foo">
        <input type="text" name="bar1" value="">
        <input type="text" name="bar1_text" value="">
        <textarea name="bar1_area"></textarea>
    </div>
</div>
<a href="#" class="btn">複製</a>
</script>

bar固定+数字を個別指定せずに処理

<script>
$(function(){
  $('.btn').on('click',function(){
    var c=$('.hoge:eq(0)').clone();
    var bar='bar'+($('.hoge').length+1).toString();
    c.find('[name]').filter(function(){
      return $(this).attr('name').match(/bar[0-9]+/);
    }).each(function(){
      var name=$(this).attr('name');
      name=name.replace(/bar[0-9]+/,bar);
      $(this).attr('name',name);
    });
    $(this).before(c);
  });
});
</script>

<div class="hoge">
    <div class="foo">
        <input type="text" name="bar1" value="">
        <input type="text" name="bar1_text" value="">
        <input type="text" name="xxx_bar1_xxx" value="">
        <input type="text" name="dummy" value="">
        <textarea name="bar1_area"></textarea>
    </div>
</div>
<a href="#" class="btn">複製</a>
</script>

Comments

[rjunakc]

回答ありがとうございます。
bar1を検索してbar2に一括で置き換えるような方法はないでしょうか。
質問用に簡単にしてありますが、もっとたくさん要素やinput以外に名前などもついているので・・・

[yambejp]

いくらでもやりようはありますが、サンプルが足りません
・「bar」は固定でいいのか？
・bar1～bar9までだとして次はbar10なのか？
・bar1_hoge1のようにbarの直後以外に数値が入ることはないのか？

[yambejp]

それと複製はあるけど、削除はないのですか？

[rjunakc]

・barは固定で大丈夫です。
・現在の使用方法では1～6までしか増やす予定はありません。もし9以降も増やすとして、10～で大丈夫です。
・bar1の前後に文字が付くこと（xxx_bar1_xxx）はありますが、前後に数値が入ることや、それがインクリメントされることはないです。

[rjunakc]

・削除は現在考えていません。

[yambejp]

調整しました

[rjunakc]

ありがとうございます。
色々参考になりました。
もう一人の回答者の方の回答も参考にしながら、要件を満たすように作ってみます。
色々とご教授下さりありがとうございました。