javascript - 如何在 JavaScript 中正确转义 JavaScript？

Question

这可能是我做不到的，但是...

parent.document.getElementById('<?php echo $_GET['song']; ?>')
  .innerHTML = '<img src="heart.png" onmouseover="heartOver('');" >';

该onmouseover="heartOver('');部分破坏了我的 JavaScript。有没有办法逃避引号，所以我可以做到这一点？

Answer 1

这只是正确转义引号的问题。

parent.document.getElementById('<?php echo $_GET['song']; ?>').innerHTML =
    '<a href="heart.php?action=unlove&song=<?php echo $song; ?>" target="hiddenframe">'
    + '<img src="images/heart.png" alt="Love!" onmouseover="heartOver(\'\');" width="16" height="16" border="0"></a>';

此外，您还缺少 alt 属性的引号。

Answer 2

用反斜杠转义嵌套引号：\'

此外，切勿在未验证或清理用户数据的情况下回显用户数据：

$song = $_GET['song'];

// Validate HTML id (http://www.w3.org/TR/REC-html40/types.html#type-name)
if(!preg_match('/^[a-z][-a-z0-9_:\.]*$/', $song) {
    // Display error because $song is invalid
}

或者

// Sanitize
$song = preg_replace('/(^[^a-z]*|[^-a-z0-9_:\.])/', '', $song);

Answer 3

您的问题是转义引号。您可以通过将 ' 或 " 替换为 \' 或 '" 来转义单引号或双引号。

所以你的代码是：

parent.document.getElementById('<?php echo $_GET['song']; ?>').innerHTML = '<a href="heart.php?action=unlove&song=<?php echo $song; ?>" target="hiddenframe"><img src="images/heart.png" alt="Love! onmouseover="heartOver(\'\');" width="16" height="16" border="0"></a>';