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

问题描述 投票:0回答:1

我有一个问题,我只是难倒。我试图替换字符串中的多个不同的子串。该网页由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示例或其他东西。谢谢!

javascript
1个回答
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)
        }
})
© www.soinside.com 2019 - 2024. All rights reserved.