Javascript代碼用數組中的值替換字符串中的值

Question

我有一個看起來像這樣的字符串：

<input type='checkbox' name='list' class='indent-28' value = 'ABC' name='Netherlands'>
    <label>Netherlands</label><br>                  
<input type='checkbox' name='list' class='indent-28' value = 'DEF' name='Germany'>
    <label>Germany</label><br>                      
<input type='checkbox' name='list' class='indent-28' value = 'GHI' name='Italy'>
    <label>Italy</label><br>                        
<input type='checkbox' name='list' class='indent-44' value = 'JKL' name='Brazil'>
    <label>Brazil</label><br>                       
<input type='checkbox' name='list' class='indent-44' value = 'MNO' name='Argentina'>
    <label>Argentina</label><br>                    
<input type='checkbox' name='list' class='indent-44' value = 'PQR' name='Argentina'>
    <label>Argentina</label><br>

我還有兩個JavaScript數組，它們根據最終用戶選擇的復選框以及要為其輸入這些選定項目的相應值而動態生成。

因此，假設用戶從上面的列表中選擇"Netherlands","Germany","Argentina"和"Argentina" ，則第一個數組將為["Netherlands","Germany","Argentina","Argentina"] 。

此外，如果用戶希望修改這些屬性的值，則可以通過在我在應用程序中提供的文本框中輸入新值來進行修改。
（在這種情況下，假設X,Y,Z,W是用戶希望輸入的新值。因此，第二個數組將是["X","Y","Z","W"] ））

現在，我同時擁有兩個數組，我只想用修改后的數組中的那些替換上面字符串中的屬性的值。

所需的輸出/最終結果將是這樣的：

<input type='checkbox' name='list' class='indent-28' value = 'X'   name='Netherlands'>
    <label>Netherlands</label><br>                   
<input type='checkbox' name='list' class='indent-28' value = 'Y'   name='Germany'>
    <label>Germany</label><br>                       
<input type='checkbox' name='list' class='indent-28' value = 'GHI' name='Italy'>
    <label>Italy</label><br>                         
<input type='checkbox' name='list' class='indent-44' value = 'JKL' name='Brazil'>
    <label>Brazil</label><br>                        
<input type='checkbox' name='list' class='indent-44' value = 'Z'   name='Argentina'>
    <label>Argentina</label><br>                     
<input type='checkbox' name='list' class='indent-44' value = 'W'   name='Argentina'>
    <label>Argentina</label><br>

X,Y,Z和W理想情況下應分別替換字符串中的先前值ABC,DEF,MNO和PQR 。

有人可以幫我這個代碼嗎？

Answer 1

您可以在字符串中搜索要取出的文本，然后將其替換為要放入的文本，即：

（str =您的文字字串）

for (i=0; i<str.length; i++)
{
  if (str.substr(i,3)=="ABC")
  {
    str = str.substr(0,i)+"X"+str.substr((i+3),(str.length-(i-3));
  }

  //...and this could be repeated for each thing that you want to replace
}

然后，您也可以使其完全動態

Answer 2

您可以使用正則表達式在字符串中搜索模式，然后將第一次出現的位置替換為包含新值的字符串。

var cty = ["Netherlands", "Germany", "Argentina", "Argentina"];
var val = ["X", "Y", "Z", "W"];

for (var i = 0; i < cty.length; i++) {
    var find = new RegExp("value='[^']*' name='" + cty[i] + "'");
    var repl = "value='" + val[i] + "' name='" + cty[i] + "'";

    str = str.replace(find, repl);
}

此代碼不能正確解釋第二個“阿根廷”值。 它用第一個匹配項替換它，覆蓋第一個更改。 第二個阿根廷的值保持不變。

您可以使用一些技巧來解決此問題：將值替換為在后續搜索中不匹配的模式。 然后，在進行所有其他替換后，將假圖案替換為所需的假圖案。

var cty = ["Netherlands", "Germany", "Argentina", "Argentina"];
var val = ["X", "Y", "Z", "W"];

for (var i = 0; i < cty.length; i++) {
    var find = new RegExp("value='[^']*' name='" + cty[i] + "'");
    var repl = "value='" + val[i] + "' shname='" + cty[i] + "'";

    str = str.replace(find, repl);
}

str = str.replace(/ shname=/, " name=");

這應該給出期望的結果。

但是，我不認為這是最簡單的解決方案。 如果您的原始字符串是從類似的列表創建的，則在這些列表上進行替換可能更容易，然后從頭開始創建HTML標記字符串。

編輯 ：這是我在Firefox中運行和測試的完整代碼。 阿根廷的兩次出現的值為"Z"和"W" 。

var str = ""
    + "<input type='checkbox' name='list' class='indent-28' value='ABC' name='Netherlands'>"
    + "<label>Netherlands</label><br>"
    + "<input type='checkbox' name='list' class='indent-28' value='DEF' name='Germany'>"
    + "<label>Germany</label><br>"
    + "<input type='checkbox' name='list' class='indent-28' value='GHI' name='Italy'>"
    + "<label>Italy</label><br>"
    + "<input type='checkbox' name='list' class='indent-44' value='JKL' name='Brazil'>"
    + "<label>Brazil</label><br>"
    + "<input type='checkbox' name='list' class='indent-44' value='MNO' name='Argentina'>"
    + "<label>Argentina</label><br>"
    + "<input type='checkbox' name='list' class='indent-44' value='PQR' name='Argentina'>"
    + "<label>Argentina</label><br>"
    ;

var cty = ["Netherlands", "Germany", "Argentina", "Argentina"];
var val = ["X", "Y", "Z", "W"];

console.log(str);

for (var i = 0; i < cty.length; i++) {
    var find = new RegExp("value='[^']*' name='" + cty[i] + "'");
    var repl = "value='" + val[i] + "' shname='" + cty[i] + "'";

    str = str.replace(find, repl);
}

str = str.replace(/ shname=/, " name=");

console.log(str);