javascript - 避免多次动态报价 onclick

Question

假设我有这样的数据

---------------
ID | Data
---------------
1  | ABCDEFG //normal
2  | ABCD'EFG // single quotes only
3  | AB'CDE'FG // mutiple single quotes only
4  | ABCD"EFG // double quotes only
5  | AB"CD"EFG // mutiple double quotes only
6  | ABCD"EFG // double quotes only
7  | ABCD`EFG // backtick only
8  | AB`CD`EFG // mutiple backtick only
9  | AB'C"DE`FG // mixing
10 | A"B'C"D'E`F`G // mutiple mixing

在遇到类似 onclick 函数内部的动态引号时，如何最好地避免错误？

let htm +=`
<button onclick="myFunction('` + val1 + `','` + val2 + `','` + val3 + `',.....etc)"></button>
`;

例子

let val1 = data[0]; // data from ID 1
onclick="myFunction('` + val1 + `')"; // this will be work fine

let val1 = data[1]; // data from ID 2
onclick="myFunction('` + val1 + `')"; // this will be error

等等..

如果数据是静态的我可以这样处理

let val1 = data[1]; // data from ID 2
onclick='myFunction("` + val1 + `")'; // this will be work fine

这些片段让你很容易理解

let htm = '';

let val1 = 'ABCDEFG';

// try to change val1 with another val
// ABCDEFG
// ABCD'EFG 
// AB'CDE'FG
// ABCD"EFG
// AB"CD"EFG
// ABCD"EFG
// ABCD`EFG
// AB`CD`EFG
// AB'C"DE`FG
// A"B'C"D'E`F`G


htm +=`
  <button onclick="myFunction('` + val1 + `')">MY BUTTON</button>
`;
$(function(){
  $("#btn1").html(htm);
});

function myFunction(val){
  $("#case1").text(val);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="btn1"></div>
<div id="case1">click the button</div>

Answer 1

不要创建 HTML 字符串。相反，create elements和 add event listeners

// fake "fetch", this is just for the demo
const fetch=async()=>({json:async()=>[{id:1,data:`ABCDEFG`},{id:2,data:`ABCD'EFG`},{id:3,data:`AB'CDE'FG`},{id:4,data:`ABCD"EFG`},{id:5,data:`AB"CD"EFG`},{id:6,data:`ABCD"EFG`},{id:7,data:`ABCD\`EFG`},{id:8,data:`AB\`CD\`EFG`},{id:9,data:`AB'C"DE\`FG`},{id:10,data:`A"B'C"D'E\`F\`G`}]})

const out = document.getElementById("case1")
const buttons = document.getElementById("btn1")

// register a delegated event listener
buttons.addEventListener("click", e => {
  const button = e.target.closest("button[data-value]")
  if (button) {
    out.textContent = button.dataset.value
  }
})

// get your data
fetch("https://example.com")
  .then(res => res.json())
  .then(results => {
    // now create the buttons
    buttons.append(...results.map(({ id, data }) => {
      const button = document.createElement("button")
      button.type = "button"
      button.append("MY BUTTON")
      button.dataset.value = data // register the value as a data attribute
      return button
    }))    
  })

<div id="btn1"></div>
<div id="case1">click the button</div>

---

因为您现在已经用 jquery 标记了它，这里有一个替代方案。相同的概念，只是更少的代码(如果您忽略约 80KB 的 jQuery)

const out = $("#out")
const buttons = $("#btn1").on("click", "button[data-value]", function() {
  out.text(this.dataset.value)
})

$.getJSON("https://example.com").done(results => {
  buttons.append(results.map(({ id, data }) => $("<button>", {
    type: "button",
    text: "MY BUTTON",
    "data-value": data
  })))
})