这是因为您使用了+
引号。你编码
str = '...' + 'onclick="show(' + this.rruga + ', ' + this.id + ');"' + '...';
将生成看起来像
onclick="show(hello world,foo bar);"
这显然不起作用,因为您的函数的参数不再正确引用,因此被视为变量名,然后空格会导致引发异常。在最坏的情况下,您没有引用this.rruga
或this.id
HTML 编码,有人可能会传递一段特制的代码,将自定义 HTML 注入页面。
只要您对参数进行编码,就可以继续使用字符串,使它们是 HTML 安全的并且不会结束引号,然后在它们周围添加引号 ( \'
)。
HTML+JavaScript 编码的引号是\\"
for\"
和\\'
for \'
。前面\\
是为了不破坏JavaScript引号,然后&foo;
是字符的 HTML 编码。
str = '...' + 'onclick="show(\''
+ (''+this.rruga).replace(/"/g, '\\"').replace(/'/g, '\\'') + '\', \''
+ (''+this.id).replace(/"/g, '\\"').replace(/'/g, '\\'') + '\');"'
+ '...';
当您在JavaScriptaddEventListener
中生成所有这些内容时,请考虑将您的侦听器排除在 HTML 字符串之外,并将其附加到带有或的元素上node.onclick
。这意味着你可以继承你在你想要的函数中的范围(尽管this
仍然会改变为Node),如果你使用 DOM 方法,你不必担心通过特殊编码的方式,因为浏览器会为你做这项工作。
编辑我将添加一个功能以方便您
function quoteAndEscape(str) {
return ''
+ ''' // open quote '
+ (''+str) // force string
.replace(/\\/g, '\\\\') // double \
.replace(/"/g, '\\"') // encode "
.replace(/'/g, '\\'') // encode '
+ '''; // close quote '
}
quoteAndEscape('I\'ll say "hello" to the WORLD!');
// 'I\'ll say \"hello\" to the WORLD!'
// which is a HTML-encoded JavaScript String literal.
// You may also want to encode the opening and closing quotes
// these ones don't need to be backslash-escaped though.
// edited that too