通过onclick将带有单引号的字符串传递给javascript函数

Question

我有一个带有 onclick 属性的按钮，它调用一个名为appr. 传递给appr每个按钮的参数不同，由 PHP 生成：return "<button type='button' onclick='appr(".$id.",\"".$qr['name']."\");'>Approve</button>";这导致了这个 HTML：<button type='button' onclick='appr(3,"Dave O'Shea");'>Approve</button>Javascript 函数如下所示。function appr(id,name){  // some code here...  alert(name);}代码工作正常，除了带有单引号的字符串，它失败了。任何想法为什么？

Answer 1

在您的代码中，单引号表示属性边界：

onclick='appr(

        ^

所以后面的第一个'将完成属性值。

您可以通过将's 替换为导致引号的 HTML 实体来修复它，以便生成的 HTML 出现在

<button type='button' onclick='appr(3,"Dave O&quot;Shea");'>Approve</button>

<button onclick='alert(&quot;foo&quot)'>Test</button>

但是最好完全避免内联处理程序并使用 Javascript 添加侦听器。例如，对于每个按钮，将包含关联的id和的对象推name送到一个数组，并以某种方式将该数组包含在对客户端的响应中 - 例如，通过将 JSON 放入脚本标签并选择/解析该脚本标签内容。然后遍历数组并为每个按钮添加一个监听器。就像是：

// retrieve array however you want

const arr = [

  { id: 3, name: "Dave O'Shea" },

  // more objects

];

const buttons = document.querySelectorAll('button');

for (const [i, { id, name }] of arr.entries()) {

  button[i].addEventListener('click', () => {

    appr(id, name);

  });

}

或任何其他类似的东西。只需避免将处理程序作为元素属性放入 HTML 标记中。

Answer 2

最好的解决方案是对属性中的动态数据使用模板文字和转义函数。像下面的例子

let str = escape("Dave O'Shea")

return `<a href="javascript:void(0);" onclick="myFunc(str)"></a>`

然后在函数中对字符串进行转义

function myFunc(str){

  str = unescape(str)

}