如何使用“for”和字符串替换？答案

【问题标题】：How to use "for" along with string replace?如何使用“for”和字符串替换？
【发布时间】：2021-12-09 11:44:03
【问题描述】：

我想在同一个字符串中进行多次替换。我有这个：

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

替换后应该是这样的：

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

所以我尝试了：

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

但它似乎没有做任何事情。怎么了？

【问题讨论】：

你能澄清一下你期望代码做什么吗？你在哪里使用mylist？你能提供一个minimal reproducible example 来证明这个问题吗？
你有一个错字}]"; 我删除了最后一个" 来修复。我认为这只是由于演示示例而不是真实代码；）
mylist 只是一个字符串，它将在给定位置显示 html 代码。喜欢这个mydiv.innerHTMLl = mylist;
这里工作正常：jsfiddle.net/bf0m7p5r 所以我不明白...
@snksaint 在您的小提琴中找到错误 :) isMyResult === whatOPWants :D 另外，该示例使用垃圾硬编码字符串...

标签： javascript str-replace

【解决方案1】：

仅创建一个由“u”前缀 ID 组成的数组
不要将replace() 与硬编码的内容一起使用。
因为正则表达式永远不应该用于类似 HTML 的字符串 - 使用适当的 DOM 解析器或内存元素。阅读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)

result 现在是这个类似于 HTML 的字符串：

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

【讨论】：

这是最直接的方法吗？
是的。也是最好的。
或者你也可以使用 document.createElement("div") 代替 DOC.body。

【解决方案2】：

你现在写的方式，它只会替换最后一个 id 并将其分配给mylist 变量，因为.replace 不会改变字符串。

如果我们分配给userlist 而不是mylist，它将按照您希望的方式工作，因为我们实际上是在每次迭代中修改字符串：

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;

&lt;div id="myDiv"&gt;&lt;/div&gt;

【讨论】：