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

Question

我有一个带有调用名为 appr 的函数的 onclick 属性的按钮。每个按钮传给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(
        ^

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

您可以通过将 ' 替换为导致引号的 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)
}

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

Passing string with single quote via onclick to javascript function

javascript

php

escaping