Store Javascript code in javascript variable

Question

I'm trying to generate javascript code snippet and then put it to textarea, so that user could copy ready javascript code.

How to store something like this

"<script type='text/javascript'> 
 function init_map(){
 var myOptions = {
 zoom:14,center:new google.maps.LatLng(33.7593664,-118.14817399999998),
 mapTypeId: google.maps.MapTypeId.ROADMAP};
 }
</script>"

in javascript variable?

• cookie monster: So you're asking how to create a string that extends over multiple lines? Is that what you want to know?
• Paul S.: New line is \n or \r\n, if you want line breaks in your literal, escape them with a single backslash too
• Jared Farrish: Make the tag text/template, give it an id and use document.getElementById('id').textContent to get the string. jsfiddle.net/WfF57/1
• gioch: When i'm trying to store js code to varialbe, program runs it. I mean if i have <script src="somescript"></script>, i want just to show it in textarea, but javascript trying to include that file.
• Paul S.: @mplungjan not if it's an external js file? but I suppose we can't assume

Answer 1

var abc = "<script type='text/javascript'>\n" + 
 "function init_map(){\n"+
 "var myOptions = {\n"+
 "zoom:14,center:new google.maps.LatLng(33.7593664,-118.14817399999998),\n"+
 "mapTypeId: google.maps.MapTypeId.ROADMAP};\n"+
 "}\n"+
"<\/script>";
alert(abc);

here is the fiddle

• Ashish Balchandani: Thanks for accepting answer. Please vote up, so this answer stays at the top and be useful for other users. Thanks again.

Answer 2

You can do it as usual..its just an ASCII string so :

var temp = "<script type='text/javascript'>\n"+
"\tfunction init_map(){\n"+
"\tvar myOptions = {\n"+
"\t\tzoom:14,center:new google.maps.LatLng(33.7593664,-118.14817399999998),\n"+
"\t\tmapTypeId: google.maps.MapTypeId.ROADMAP};\n"+
"\t}\n"+
"<\/script>";

But I would suggest to use the "pre" html tag to display the code. Again everything is a matter of taste and maintainability.

I'm sure that there are way more elegant ways of dealing with code samples display.

You can always use an Open Source JavaScript code beautifier like which can output valid html etc. Have a look on this project : https://github.com/beautify-web/js-beautify

It powers the popular http://jsbeautifier.org/

Answer 3

You can use the \ character to continue the string on the following line, and also the \n character to create a new line, like this:

var string = "<script type='text/javascript'>\n\
 function init_map(){\n\
 var myOptions = {\n\
 zoom:14,center:new google.maps.LatLng(33.7593664,-118.14817399999998),\n\
 mapTypeId: google.maps.MapTypeId.ROADMAP};\n\
 }\n\
<\/script>" // the / in </script> needs also to be escaped
document.getElementById('your-text-area-id').value = string;

In your textarea you will see:

screenshot

• mplungjan: You MUST escape the slash in </script>: <\/script> and if you use \n you do not need to use actual newlines
• Marco Bonelli: Actually you don't need to do it. It's not a backslash, it's a normal slash. It doesn't cause any problem.
• mplungjan: Yes it does. It ends the current script - try it <script>document.write('<script>alert("hello")</script>');alert('This will fail');</script>
• Jared Farrish: You don't understand the problem: The </script> will always be interpreted as an end tag for the current <script> tag. It doesn't matter that it's "in a string". See: jsfiddle.net/Z8zhd VS. jsfiddle.net/Z8zhd/1
• Marco Bonelli: @mplungjan Oh yes, I didn't understand your comment in that way. You're right it needs to be escaped.