Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question

migrated from stackoverflow.com Jul 17 '11 at 11:39

This question came from our site for professional and enthusiast programmers.

1  
possible duplicate of Which is better: to include HTML inside PHP code or outside it? –  Jim G. Dec 24 '12 at 9:49

2 Answers 2

up vote 7 down vote accepted

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.

share|improve this answer
    
+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 '11 at 15:28
    
Simple and elegant, I like it. –  Julian H. Lam Jul 14 '11 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 '11 at 22:29

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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