Jquery/Javascript clone replace ID dynamically

Question

I have this sample content which is cloned, having id's to be replaced.

<div id="tabs-1"><div class="ui-widget"> 
    <label for="tags">Wohnort: </label> <input class="tags" id="tags-1" name="tags[]" type="text"/>
</div>
    <input type="hidden" class="hid_id" id="hid_id-1" name="hid_id[]"/><input type="hidden" id="hid_id2-1" class="hid_id2" name="hid_id2[]"/>
<div class="ui-widget"> 
    <label for="jahr">Geburtstag: </label> <input type="text" id="jahr-1" class="jahr dated" name="jahr[]" placeholder="dd.mm.yyyy" pattern="^[a-zA-Z0-9\.]*$" class="dated"/>
</div></div>

The regex for getting the id's could be

 /id="[^"]+-[^"]+"/g

checkable here: https://regexr.com/ the matching array are id="tags-1", id="hid_id-1", etc. now i want those to be changed to id="tags-2", id="hid_id-2", etc.

so i can not just replace statically but shall use the matching array Each, split and reuse the first part with adding the new id thereafter.

my code so far gets the id like this: (the var new_id gets the id increased beforehand)

jQuery('#tabs-1').children().clone()
.html(function(i, oldHTML) {
var old_base = oldHTML.split("-");
var new_result = old_base[0]+"-"+ new_ide;
alert(new_result);
var new_html = oldHTML.replace(/id="[^"]+-[^"]+"/g, new_result);
})
.appendTo("#tabs-"+new_id);

when i would have the matches in an array i could go like:

arr.forEach(myFunction);
myFunction(item, index, arr){
new_var = item.split("-");
new_full_id = new_var[0] +"-"+new_full_id;
}

how can i get this combined to do what's intended? - Thanks so much

Answer 1

Ok so first of all, this solution will work correctly. But it is definitely not a fool-proof solution; nor is it the best for readability. Ideally, you should parse it as nested HTMLElements and replace each id in your format. Still, here's the solution:

---

/(?<= id=["'])[^"]+-(\d+)(?=["'])/g

As you can see using this link. For every match, extract the last number, increment it, and add it back. Here's how the code would look.

let input = `<div id="tabs-1" data-something-id="smth-1"><div class="ui-widget"> 
    <label for="tags">Wohnort: </label> <input class="tags" id="tags-1" name="tags[]" type="text"/>
</div>
    <input type="hidden" class="hid_id" id="hid_id-1" name="hid_id[]"/><input type="hidden" id="hid_id2-1" class="hid_id2" name="hid_id2[]"/>
<div class="ui-widget"> 
    <label for="jahr">Geburtstag: </label> <input type="text" id="jahr-1" class="jahr dated" name="jahr[]" placeholder="dd.mm.yyyy" pattern="^[a-zA-Z0-9\.]*$" class="dated"/>
</div></div>
`
let regex = /(?<= id=["'])[^"]+-(\d+)(?=["'])/g
console.log(input.replaceAll(regex, function(match) {
  let sep = match.split("-")
  let first = sep[0]
  for(let i = 1; i < sep.length-1; ++i) first += "-" + sep[i];
  return first + "-" + (parseInt(sep[sep.length-1])+1)
}))

PS: This will work in most modern browsers, but to be safe you should check out this link: caniuse.com - Regex Lookbehind