如何在 javascript 中转义 html / 特殊字符串答案

【问题标题】：how to escape html / special strings in javascript如何在 javascript 中转义 html / 特殊字符串
【发布时间】：2013-02-05 23:58:40
【问题描述】：

我有一个需要打印一些文本的 php / javascript 脚本。不幸的是，如果字符串有特殊字符，那么 js 似乎会崩溃

下面是脚本中的一个 sn-p。 $messageContent 和 $subject 是带有 html 标签的字符串。（实际上是“'”字符）。

echo '
<script language="javascript">
function SelectRedirect(){
switch(document.getElementById(\'s1\').value)
{
';

echo '
case "?vrj_name='.$vrj_name.'":
window.location="?vrj_name='.$vrj_name.'&messageContent='.$messageContent_vrj.'&from_email='.$from_email.'&email='.$email.'&subject='.$subject.'";
break;
';
}

我在php中添加了一个函数用“\'”替换“'”并且它可以工作（js执行成功）但是当我在网页中显示它们时我无法驾驭它们。

【问题讨论】：

json_encode 字符串
你根本不应该用 PHP 回显 Javascript。不可维护、不可读、容易出错。见stackoverflow.com/questions/2766041/…
@bažmegakapa：json_encode 有什么问题？
这真的是一个很好的问题。我会参考@gahooa 下面的答案，因为他确实把这个问题钉在了头上。
@Jon 仍然比串联的噩梦好，但我宁愿根本不将 JS 与 PHP 混合。当然，在某些情况下，它似乎是最好的选择，但我更喜欢data- 属性解决方案。

标签： php javascript escaping html-escape-characters

【解决方案1】：

最好的方法是使用json_encode 对值进行编码。这是一个简单的例子：

<?php
$name = "Jason's Bakery";

?>
<script>
   var name = <?php echo json_encode($name); ?>;
   DoSomethingWithName(name);
</script>

这可用于整数、字符串和其他值。请记住，它会根据需要添加引号，因此您需要一次组装和编码“整个值”。在您使用 URL 的示例中，您需要先使用 PHP urlencode() 函数对其进行编码，然后将其传递给 json_encode 以转换为 javascript 值。如果您将其放在 HTML 属性中，例如 onclick，则需要进一步将其传递给 htmlspecialchars(..., ENT_QUOTES)，然后将其放在双引号中。

http://php.net/manual/en/function.json-encode.php

例如，你需要在 PHP 中构建一个 URL，然后在 javascript 中使用它...

<?php
$name = "Jason's \"Awesome\" Bakery";
$url = "http://site.com/page.php?name=" . urlencode($name);

?>
<script>
   var name = <?php echo json_encode($name); ?>;
   DoSomethingWithName(name);
</script>

<input type="button" onclick="<?php echo htmlspecialchars('window.location = ' . json_encode($url) . ';', ENT_QUOTES); ?>" value="Click Me" />

结果如下：

<script>
   var name = "Jason's \"Awesome\" Bakery";
   DoSomethingWithName(name);
</script>

<input type="button" onclick="window.location = &quot;http:\/\/site.com\/page.php?name=Jason%27s+%22Awesome%22+Bakery&quot;;" value="Click Me" />

不用说，你不想没有这些：

http://php.net/manual/en/function.json-encode.php
http://www.php.net/manual/en/function.urlencode.php
http://www.php.net/manual/en/function.htmlspecialchars.php

【讨论】：

我会争辩“最好的方式”，但否则很好的答案。
@bažmegakapa：请解释一下，为了我的利益，你会怎么做？（考虑到我的编辑）
我不会使用 PHP 将某些内容回显到 Javascript 代码中，但我会使用 HTML 元素的 data- 属性来传递数据（通常它适合一个元素，如果不是，你还有body)。此处描述：stackoverflow.com/questions/2766041/…。顺便说一句，我赞成你的回答。
@bažmegakapa：是的，我同意并且也喜欢这一点。但是，没有什么比加载页面仅触发 ajax 调用来获取数据更令人反感的了。这是将 JSON 数据注入 HTML 页面的主要用例——以消除这种情况。并且您可以通过使用单独的函数来获取数据并对其进行处理来保留完整的 ajax 功能——初始页面加载仅使用 json_encode 输出数据调用处理函数，而后续调用使用 AJAX 获取数据并将其传递。
现在我意识到我正在与问题下的 cmets 中的同一个人交谈：D。你是对的，为此使用 Ajax 太过分了。我只是说，而不是var x = <?=$y?>;（其中$y 是JSON 字符串），您应该将数据放入HTML：<div data-x="<?=$y?>"> 其中$y 是正确转义以插入HTML 的JSON 字符串属性。现在可以使用 DOM 来检索数据，并且一切都保持分离。我发现这个更清洁。不过我只是想提一下，以便以后的访问者看到有替代方案，他们可以选择。

【解决方案2】：

出于可读性和未来可维护性的考虑，我想指出一些可能对您有所帮助的事情。

首先，我看到您在 PHP 字符串中生成 HTML 元素。这本来就不是坏事，但是当你的字符串跨越 2 行或更多行时，它变得越来越难以管理。相反，您可能需要考虑转义 PHP 以输出 HTML 部分，并重新输入 PHP 以获取逻辑部分。您可以转义 PHP 并在 if 语句、函数声明等中输入 HTML，所以真的没有理由不这样做。看下面的例子（这个解决方案还以适当的方式对字符串进行转义，其中它的值可以包含单引号、双引号或换行符）：

<?php

function urlFriendly($input) {
    return urlencode($input);
}

function jsFriendly($input, $urlFriendly = True) {
    $output = htmlentities($input, ENT_QUOTES);
    // Double quotes in PHP translate "\n" to a newline.
    // Single quotes in PHP keep the literal value.
    $output = str_replace("\r\n", '\n', $output); // Windows support
    $output = str_replace("\n", '\n', $output); // Linux support
    if($urlFriendly) { // Encode for use in URLs
      $output = urlFriendly($output);
    }
    return $output;
}

$vrj_name = 'vrj';
$messageContent_vrj = 'message content';
$from_email = 'from email';
$email = 'email';
$subject = 'subject line';

?>
<script type="text/javascript">
    function SelectRedirect() {
    switch(document.getElementById('s1').value) {
        case '?vrj_name=<?php print jsFriendly($vrj_name);?>':
            var toloc = '?vrj_name=<?php print jsFriendly($vrj_name);?>';
            toloc    += '&messageContent=<?php print jsFriendly($messageContent_vrj);?>'';
            toloc    += '&from_email=<?php print jsFriendly($from_email);?>';
            toloc    += '&email=<?php print jsFriendly($email);?>';
            toloc    += '&subject=<?php print jsFriendly($subject);?>';
            window.location = toloc;
            break;
    }
</script>

【讨论】：

【解决方案3】：

就这样

$escaped_string = addslashes($unescaped_string);

之前

$messageContent = addslashes($messageContent);
$subject = addslashes($subject);

甚至内联

echo '
case "?vrj_name='.$vrj_name.'":
window.location="?vrj_name='.$vrj_name.'&messageContent='.addslashes($messageContent).'&from_email='.$from_email.'&email='.$email.'&subject='.addslashes($subject).'";
break;
';

【讨论】：