7

A colleague and I were discussing how to echo HTML inside of javascript code. Specifically, in a situation similar to this:

new Element('div', {
    html: '{long string of HTML goes here!}'
}.inject($('content'));

Short snippets seem to work well in this situation, but what if we were echoing a large set of data? The line would then become very long, and hard to debug (because who horizontally scrolls?!)

A problem also lies in the fact that besides its length, all quotes used need to be escaped, especially if the javascript code is being echo'd from the server side, in which case one of the quote marks would be "used up", per se.

One solution would be to break up the long line of HTML code:

new Element('div', {
    html:   '{long string of HTML goes here!}' +
            '{some more HTML goes here}' +
            '{and even more...}'
}.inject($('content'));

Another solution provided involved including an addslashes()'d server-side include, which involves a second file. Although I suppose it is also possible to define all of the to-be-included HTML in a php variable, and echo it when it is needed:

<?php
    $html = addslashes('{html content}');
?>

new Element('div', {
    html: '<?=$html?>'
}.inject($('content'));

Which method is best in terms of code readability, efficiency, and security?

1

2 Answers 2

7

The addslashes method is NOT reliable. Instead, do:

new Element('div', {
    html: <?= htmlspecialchars(json_encode($html)) ?>
}.inject($('content'));

addslashes() is a braindead deprecated method of escaping text for SQL usage. It's not intended for Javascript. That's what JSON is for. It'll convert your PHP data (simple variable, object, array, etc...) into what's guaranteed to be syntactically correct Javascript.

JSON (or javascript) embedded in HTML needs to be properly escaped for HTML. That is why it is wrapped in htmlspecialchars(). Consider that JSON will NOT encode <, >, &, and others because they are valid characters in a quoted JSON string.

However, since you're just inserting one block of html into JS, you could just have

<div id="seekrithiddenhtml" style="display: none">
<?= $html ?>
</div>

from which you can then do a simple cloning in javascript.

3
  • +1. I was writing up the answer. :) The string value should be stored in an array, like: $arr = array('html'=>'long string...') and then do a <?php echo json_encode($arr); ?>.inject($('content').
    – Shef
    Jul 14, 2011 at 15:28
  • Simple and elegant, I like it.
    – Julian H. Lam
    Jul 14, 2011 at 16:22
  • Please note: „This function only works with UTF-8 encoded data.“ (PHP manual) But that shouldn't be a big issue. That question is rather popular by the way. Regarding the legibility of long lines of code: Use an editor or a viewer with decent word wrap capabilities. It'll save you a lot of frustration.
    – Marc Ermshaus
    Jul 14, 2011 at 22:29
1

I think it's always better to segregate the code and content. Whenever you can avoid injecting literal page copy into your source, do it. One big advantage of that is it would allow you to provide restricted access for copy editors to the files containing the page copy, meaning you would never be doing their job, and they would never be messing with your code. That being said, I don't think storing the page copy in files is the way to go - I'd recommend a database whenever possible so you could easily create an UI for copy manipulation. Then, referencing in your source is consistent, abstract, and dynamic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.