I want to make several replacements in the same string. I have this:

ignoredids = [{"ignoredid":"3329"},{"ignoredid":"25895"}];
userlist = `<div id="u343">something</div><div id="u3143">something</div><div id="u25895">something</div><div id="u5343">something</div><div id="u3329">something</div>`;

after the replacements it should look like this:

<div id="u343">something</div><div id="u3143">something</div><div id="u25895">ignore this</div><div id="u5343">something</div><div id="u3329">ignore this</div>

So I tried:

for (let { ignoredid } of ignoredids) {
  mylist = userlist.replace(`<div id="u${ignoredid}">something</div>`,`<div id="u${ignoredid}">ignore this</div>`);        
} 

but it doesnt seem to do anything. What is wrong?

CodePudding user response：

The way you wrote it now, it will only replace on the last id and assign it to the mylist variable, because .replace does not mutate the string.

If we assign to userlist instead of mylist it will work the way you want it to work, because then we're actually modifying the string on every iteration:

ignoredids = [{"ignoredid": "3329"}, {"ignoredid": "25895"}];
userlist = `<div id="u343">something</div><div id="u3143">something</div><div id="u25895">something</div><div id="u5343">something</div><div id="u3329">something</div>`;

for (let { ignoredid} of ignoredids) {
  userlist = userlist.replace(`<div id="u${ignoredid}">something</div>`, `<div id="u${ignoredid}">ignore this</div>`);
}

document.getElementById("myDiv").innerHTML = userlist;

<div id="myDiv"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

• Create an Array of "u" prefixed IDs only
• Don't use replace() with hardcoded stuff.
• And since Regular Expression should never be used on HTML-alike strings - use instead a proper DOM parser or inmemory Element. Read about DOMParser.parseFromString()

// Helper function
const arrHas = (arr, val) => arr.some(a => val === a);

// Your stuff:
const replacer = "IGNORE THIS";
const ignoredids = [
  {"ignoredid":"3329"},
  {"ignoredid":"25895"},
];
const userlist = `<div id="u343">Lorem ipsum</div>
<div id="u3143">Dolor sit amet</div>
<div id="u25895">consectetur adipisicing</div>
<div id="u5343">Elit enim </div>
<div id="u3329">Nemo eveniet</div>`;

// Create an Array of "u" prefixed IDs 
const uIDs = ignoredids.map(o => `u${o.ignoredid}`); 

// Use DOMParser!!
const DOC = new DOMParser().parseFromString(userlist, "text/html");

[...DOC.body.children].forEach(EL => {
  if (arrHas(uIDs, EL.id)) EL.textContent = replacer;
});

const result = DOC.body.innerHTML;
console.log(result)

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

result is now this HTML-alike String:

<div id="u343">Lorem ipsum</div>
<div id="u3143">Dolor sit amet</div>
<div id="u25895">IGNORE THIS</div>
<div id="u5343">Elit enim </div>
<div id="u3329">IGNORE THIS</div>