Encode and pass HTML from PHP to Javascript

Question

i need to pass an html template to a javascript variable in php

i tried differents things like json_encode(), str_replace() addcslashes() but javascript always throw an error of unexpected character

<?php
$html = file_get_contents('template.html');

function escapeJavaScriptText($string)
{
    return str_replace("\n", '\n', str_replace('"', '\"',      addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\")));
}
?>

<script> var template = "<?php echo escapeJavaScriptText($html)  ?>"</script>

You can try str_replace (array("\r\n", "\n", "\r"), ' ', $html). But are you sure it's best solution? to pass an html template to a javascript variable in PHP ;)? — Antanas Kaselis
– Antanas Kaselis, Commented Nov 22, 2016 at 13:18
i'm not sure :D but i need my html template and my js in the same js file — TheShun
– TheShun, Commented Nov 22, 2016 at 13:24

bassxzero · Accepted Answer · 2016-11-22 13:36:56Z

1

I always use a <script> tag to hold my HTML templates. It's a habit I learned from using Handlebars JS. http://handlebarsjs.com/

The trick is the type="text/html" attribute, the browser doesn't know what do with it so it doesn't display it and doesn't try to run it as code.

<script type="text/html" id="Template1">
    <p>This is a template</p>
    <p>More template stuff</p>
</script>

To access the template you can do something like

JQuery:

$('#Template1').html()

Javascript:

document.getElementById('Template1').innerHTML;

answered Nov 22, 2016 at 13:36

bassxzero

5,01924 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheShun Over a year ago

looks good, is it ok to put multiple <script> tags in the same .js file ?

bassxzero Over a year ago

@TheShun I don't see why you couldn't, but I've only ever done it with one.

TheShun Over a year ago

i just tried, i can't use this method since my script is a .js file already embeded in a script src tag

Collectives™ on Stack Overflow

Encode and pass HTML from PHP to Javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related