複数の部分文字列を文字列に置き換える - 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)となります。しかし、2番目のループでは、古い（変更されていない）変数を再度使用します。そのため、一時変数の値は、最初に置換されずに新しい値に置き換えられます。以下の固定コード。注意newDataはdataの値で初期化され、ループ内ではnewDataのみが使用されます。

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