导致 JQuery 函数失败的隐藏字符答案

【问题标题】：Hidden characters causing JQuery function to fail导致 JQuery 函数失败的隐藏字符
【发布时间】：2018-05-29 07:50:15
【问题描述】：

我试图了解导致简单 jquery 函数失败的原因。它只是查找 ID，用其他数据替换一些内容。我有 $data1、$data2、$data3 作为“...更多”的替换测试数据。替换适用于 $data1 和 $data2，但对 $data3 无效。不幸的是，我需要处理的所有数据都是 $data3 格式。

测试代码如下：

<?php
  $data1 = '<p>line one text here</p>'; 
  $data2 = '<p>line one text here</p><p>line two text here</p><p>line three text here</p>';
  $data3 = <<<EOF
    <p>line one text here</p>
    <p>line two text here</p>
    <p>line tgree text here</p>
EOF;
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //To get remainder of article when clicked on "...more"
            $(document).ready(function () {
                $("#more").click(function () {
                    $("#more").html('<?= $data2; ?>');
                    $("#more").css('color', 'black');
                    $("#more").css('cursor', '');
                });
            });
        </script>
    </head>
    <body>
        <p class="card-text"><span id="more" style = "color: blue; cursor:pointer;">...more</span></p>  
    </body>
</html>

查看控制台，我看到 jquery 代码中的数据显示 $data1 和 $data2 的单个连续行，但是，对于 $data3，显然有换行符，这是我怀疑导致失败的原因（脚本什么都不做，没有变化发生）。见下图：

我如何找出这些隐藏字符是什么造成了问题，以便我可以在提交给 jquery 函数之前删除/替换所有这些字符，或者有没有办法事先在函数中处理它？任何其他见解表示赞赏。

提前致谢！

【问题讨论】：

PS：你所有的脚本最好放在结束 </body> 标记之前。（不在您文档的 HEAD 中以呈现阻塞的方式）

标签： javascript php jquery

【解决方案1】：

要解决这个问题，您需要在 JS 代码中使用模板文字，即。用` 而不是' 或" 分隔字符串。这是因为它们允许字符串文字中的换行符，就像 PHP 所做的那样：

$("#more").html(`<?= $data2; ?>`);

请注意，IE11 及更低版本不支持此功能。

或者，您需要在 PHP 中的字符串输出到 JS 之前替换换行符。

【讨论】：

您的建议效果很好！我是否理解使用反引号 ` ` 意味着 jquery 脚本将接受所有字符并因此也替换所有字符？似乎是。再次感谢。

【解决方案2】：

EOF 正在为您的字符串添加回车符和制表符。

您可以更改创建 $data3 的 PHP 方式：

<?php
  $data1 = '<p>line one text here</p>'; 
  $data2 = '<p>line one text here</p><p>line two text here</p><p>line three text here</p>';
  $data3 =
    "<p>line one text here</p>"
    . "<p>line two text here</p>"
    . "<p>line tgree text here</p>";
?>

您也可以替换不需要的值：

$data3 = preg_replace('/[\n\r\t]/', '', $data3);

【讨论】：