Использование JS или Jquery для замены всех экземпляров вложенного ключа в указанном c DIV

Question

У меня есть div. Я хочу заменить все экземпляры [1234], например, на, скажем, [5678], но только внутри # groovy DIV, а не внутри всего do c.

Я пытался:

  jQuery("#groovy").html().replace(/stuff\[1234\]/g,"stuff[5678]");

И мне не повезло с этим.

<div id="groovy">
<h1>Some Stuff</h1>
<input name="stuff[1234][morestuff][otherstuff]">
<p>Things</p>
<input name="stuff[1234][goodstuff][betterstuff]">
<div class="telly">
<input name="stuff[1234][badstuff][decentstuff]">
</div>

</div>

Answer 1

$("#groovy input[name*='[1234]']").each(function(){
  var item = $(this);
  item.attr('name', item.attr('name').replace('[1234]', '[5678]'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="groovy">
<h1>Some Stuff</h1>
<input name="stuff[1234][morestuff][otherstuff]">
<p>Things</p>
<input name="stuff[1234][goodstuff][betterstuff]">
<div class="telly">
<input name="stuff[1234][badstuff][decentstuff]">
</div>

</div>

Answer 2

Это получит содержимое тега HTML, вернет их и заменит строковое значение. Проблема в том, что вы не устанавливаете содержимое, когда закончите.

jQuery("#groovy").html().replace(/stuff\[1234\]/g,"stuff[5678]");

Попробуйте что-то вроде этого:

const elem = jQuery("#groovy");
elem.html(elem.html().replace(/stuff\[1234\]/g,"stuff[5678]"));

Answer 3

Для этого вам нужно получить доступ к содержимому #groovy (как вы делаете), а затем применить обновленное содержимое обратно к этому элементу:

/* Obtain html content of groovy */
const originalHtml = jQuery("#groovy").html();

/* Update html as required */
const updatedHtml = originalHtml.replace(/stuff\[1234\]/g, "stuff[5678]");

/* Apply updated html back to groovy element */
jQuery("#groovy").html(updatedHtml);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="groovy">
  <h1>Some Stuff</h1>
  <input name="stuff[1234][morestuff][otherstuff]">
  <p>Things</p>
  <input name="stuff[1234][goodstuff][betterstuff]">
  <div class="telly">
    <input name="stuff[1234][badstuff][decentstuff]">
  </div>
</div>