通过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(&nbsp; &nbsp; &nbsp; &nbsp; ^所以后面的第一个'将完成属性值。您可以通过将'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 wantconst arr = [&nbsp; { id: 3, name: "Dave O'Shea" },&nbsp; // more objects];const buttons = document.querySelectorAll('button');for (const [i, { id, name }] of arr.entries()) {&nbsp; button[i].addEventListener('click', () => {&nbsp; &nbsp; appr(id, name);&nbsp; });}或任何其他类似的东西。只需避免将处理程序作为元素属性放入 HTML 标记中。

Answer 2

最好的解决方案是对属性中的动态数据使用模板文字和转义函数。像下面的例子let str = escape("Dave O'Shea")return `<a href="javascript:void(0);" onclick="myFunc(str)"></a>`然后在函数中对字符串进行转义function myFunc(str){&nbsp; str = unescape(str)}