替换字符串中的多个子字符串 - 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)时替换值。但是在第二个循环中，您再次使用旧的（未修改的）变量。所以它在没有第一次替换的情况下用新的替换临时变量的值。 Se固定代码如下。注意使用newData值初始化的data，并且在循环内仅使用newData。

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