如何在 oninput 屬性中使用 function “構建” HTML 輸入字段？

Question

我一直在嘗試我能想到的所有可能的方法，但它仍然是錯誤的：

這是我在構建表格時應該使用的：

<input oninput="this.value=this.value.replace(/(?.[0-9]),/gmi,'')"></input>

這是 JS 片段，在構建時沒有顯示任何錯誤：

for (var i = 0; i < ar.length; i++) {
  result += "<tr>";
  for (var j = 0; j < ar[i].length; j++) {
    result +=
      (j == 8) ? "<td><span class='dollarcurrency' >$</span><input oninput='this.value=this.value.replace(/[^0-9.,]+/gmi,'')' class='price' name='numberInputs' value='' onchange='add_to_total(this, origin);deposit(getDeposit(), origin)'></td>" :
      "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
  }
  result += "<td class='total_price'><strong>$0.00</strong></td>";
  result += "<td><input type='checkbox'></td>";
  result += "</tr>";
}

我不確定如何將""放在replace()中，因為它已經包含在''中。

，但是當它被構建時，它會拋出以下錯誤： SyntaxError: Unexpected end of input

這是檢查 HTML 時的樣子： <input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi," ')'="" class="price" name="numberInputs" value="" onchange="add_to_total(this, origin);deposit(getDeposit(), origin)">

感謝你的幫助！

Answer 1

您可以使用反引號。 它們通常用於模板文字，但在這里它會讓您擁有另一種類型的字符串分隔符，並將您從特殊字符 escaping 地獄中拯救出來。

for (var i = 0; i < ar.length; i++) {
  result += "<tr>";
  for (var j = 0; j < ar[i].length; j++) {
    result += // backquote here so you can use "" in the replace
      (j == 8) ? `<td><span class='dollarcurrency' >$</span><input oninput='this.value=this.value.replace(/[^0-9.,]+/gmi,"")' class='price' name='numberInputs' value='' onchange='add_to_total(this, origin);deposit(getDeposit(), origin)'></td>` :
      "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
  }
  result += "<td class='total_price'><strong>$0.00</strong></td>";
  result += "<td><input type='checkbox'></td>";
  result += "</tr>";
}