javascript - 替换字符串中的多个子字符串 - Javascript

Question

我有一个问题被难住了。我正在尝试替换字符串中的多个不同的子字符串。该网页由 code 标记之间的 javascript 对象代码片段组成。用户应该能够在输入中键入内容，单击提交，然后替换对象上的相应值。对象上的键与输入上的 id 匹配。

//get all inputs on the page
let inputs = Array.from(document.getElementsByTagName('input'))

//content that appears in the <code> tags
let data = `data: {
    First_Name: '{First_Name}',
    Last_Name: '{Last_Name}'
},`

//set that content to the innerHTML
$('code').html(data)

$('button').click(function() {
    var newData = '';
    inputs.forEach(input => {
        if(data.includes(input.id)) {
           newData = data.replace(`{${input.id}}`, input.value)
        }
})

console.log(newData)
    /*
    returns let data = `data: {
    First_Name: '{First_Name}',
    Last_Name: 'Smith'
    },`
    */
})

这就是我所了解到的。我明白这一行

newData = data.replace(`{${input.id}}`, input.value)

返回一个新字符串，它似乎正在替换名字，然后返回并替换原始字符串中的姓氏并返回。因此，我缺少一些实现这一目标的关键，或者是一种完全更好的方法。我感谢任何帮助，请告诉我是否应该举一个 jsfiddle 示例或其他内容。谢谢!

Answer 1

首次将新字符串分配给临时变量时替换值newData = data.replace({${input.id}}, input.value)。但在第二个循环中，您再次使用旧的(未修改的)变量。因此，它会用新的值替换临时变量的值，而无需先进行替换。下面是固定的代码。注意 newData 是用 data 值初始化的，并且循环内仅使用 newData。

$('button').click(function() {
    var newData = data;
    inputs.forEach(input => {
        if(data.includes(input.id)) {
           newData = newData.replace(`{${input.id}}`, input.value)
        }
})