如何在JavaScript回声中转义HTML

Question

I can't escape my code JS in my echo :

echo "<script type='text/javascript'>
    // Initialiser l'objet.
    var tab_nb_match_par_user = ".json_encode($tab_nb_match_par_user).";
    var taille = 70;    
    console.log(tab_nb_match_par_user);
    for (var k in tab_nb_match_par_user){
        $('#img').append('<img src="stats_matching/' + k + '.gif" alt="' + k + '" title="' + k + '" width="' + taille + '" />');
        taille = taille-6;
    }
</scrip>";

And I have this follow error: Uncaught SyntaxError: missing ) after argument list

Answer 1

Use HEREDOC instead of echo.

echo <<<ENDOFSCRIPT
<script type='text/javascript'>

                    // Initialiser l'objet.
                    var tab_nb_match_par_user = ".json_encode($tab_nb_match_par_user).";
                    var taille = 70;    
                    console.log(tab_nb_match_par_user);
                    for (var k in tab_nb_match_par_user){
                        $('#img').append('<img src="stats_matching/' + k + '.gif" alt="' + k + '" title="' + k + '" width="' + taille + '" />');
                        taille = taille-6;
                    }
            </script>

ENDOFSCRIPT;

more info at https://wiki.php.net/rfc/heredoc-with-double-quotes

Answer 2

Assuming that you only want to actually have php fill in the json part, why not just echo in the bit you need, rather than the whole structure. This is much better practice in templating.

<script type='text/javascript'>
    // Initialiser l'objet.
    var tab_nb_match_par_user = "<?php echo json_encode($tab_nb_match_par_user) ?>";
    var taille = 70;    
    console.log(tab_nb_match_par_user);
    for (var k in tab_nb_match_par_user){
        $('#img').append('<img src="stats_matching/' + k + '.gif" alt="' + k + '" title="' + k + '" width="' + taille + '" />');
        taille = taille-6;
    }
 </script>

you were also missing a 't' in your end script tag.

Answer 3

echo <<<END
    <script type="text/javascript">
        // Initialiser l'objet.
        var tab_nb_match_par_user = ".json_encode($tab_nb_match_par_user).";
        var taille = 70;    
        console.log(tab_nb_match_par_user);
        for (var k in tab_nb_match_par_user){
            $('#img').append('<img src="stats_matching/' + k + '.gif" alt="' + k + '" title="' + k + '" width="' + taille + '" />');
            taille = taille-6;
        }
    </script>
END;

Answer 4

You need to escape the code using a back slash:

echo "<script type='text/javascript'>

                        // Initialiser l'objet.
                        var tab_nb_match_par_user = ".json_encode($tab_nb_match_par_user).";
                        var taille = 70;    
                        console.log(tab_nb_match_par_user);
                        for (var k in tab_nb_match_par_user){
                            $('#img').append('<img src=\"stats_matching/' + k + '.gif\" alt=\"' + k + '\" title=\"' + k + '\" width=\"' + taille + '\" />');
                            taille = taille-6;
                        }
                </scrip>";