I need a way to store HTML from a PHP variable in JavaScript.

var contents = "{{ $template }}";

This generates an error however. I guess it's because it's not escaped properly, So it messes up the web browser, because JS cannot store it properly... I've tried Laravel escaping

var contents = "{{ e($template) }}";

without any success.

The end goal is: $('#preview-iframe').contents().find('html').html(contents);

How can I accomplish this?

I need a way to store HTML from a PHP variable in JavaScript.

var contents = "{{ $template }}";

This generates an error however. I guess it's because it's not escaped properly, So it messes up the web browser, because JS cannot store it properly... I've tried Laravel escaping

var contents = "{{ e($template) }}";

without any success.

The end goal is: $('#preview-iframe').contents().find('html').html(contents);

How can I accomplish this?

• javascript
• php
• jquery
• laravel

• 1 can you show the html after escaped? – Amir Bar Commented Jun 3, 2014 at 9:29

5 Answers 5

The double curly brackets {{ }} will always convert special characters to HTML entities. Try using {!! !!} to render the code exactly. However, you will want to make sure you escape the double quotes in the string.

So this:

var contents = "{{ $template }}";

Should be something like:

var contents = "{!! addcslashes($template, '"') !!}";

I used this workaround for the same problem

var contents = atob("{{ base64_encode($contents) }}");

This is very convenient, because you don't have to escape any characters, and you are guaranteed that there won't be any syntax errors with javascript.

One downside is that atob() function is supported in IE10 and up - Source

You can take a PHP variable value to java script as bellow

<script>
   var jsvariable = <? echo $phpvarialbe ?>;
   console.log(jsvariable)
</script>

You can try var contents = {{$template->toJSON()}};

I came across very similar problem. The problem is that if you use

var contents = "{{ e($template) }}";

inside your javascript, the parser thinks {{ e($template) }} is the javascript object and not your blade variable. Parentheses inside script block are not treated as blade variable, but as object in JSON format.

My solution was, that I made a template and included it into place of blade variable like this

var contents = '@include("public.default.values.content")';

Then I created file in folder (your views folder)/public/default/values/content.blade.php and added into this template file only one line, your value

{{ e($template) }}

Include is correctly understood by blade parser inside javascript block. This way the blade parser will correctly use your include in javascript code, correctly go to content blade, get the value and save it in you javascript variable.