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

我有一个问题刚刚被难住了。我试图替换字符串中的多个不同子字符串。该网页由

code

标记之间的javascript对象代码片段组成。用户应该能够键入输入，单击submit，并替换对象上的相应值。对象上的键与输入上的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)

---

返回一个新字符串，它似乎在替换名字，然后返回并替换原始字符串中的姓氏并返回该字符串。因此，有一些关键，以实现这一点，我错过了或一个完全更好的方式做到这一点。我感谢任何帮助，请告诉我是否应该提供一个JSFIDLE示例或其他内容。谢谢

第一次为临时变量指定新字符串时替换值

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