Question

我试图了解导致简单jquery函数失败的原因。它只是查找ID，用其他数据替换一些内容。我有$ data1，$ data2，$ data3作为＆＃34; ...更多＆＃34;的替换测试数据。替换适用于$ 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函数之前删除/替换所有这些字符，或者是否有办法事先在函数中处理它？任何其他见解表示赞赏。

提前致谢！

Answer 1

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

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

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

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

Answer 2

EOF正在为你的字符串添加返回车厢和标签字符。

您可以更改PHP创建$ 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 =
    "<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);

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

2 个答案: