如何在 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>";
}