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?

So you're asking how to create a string that extends over multiple lines? Is that what you want to know? — cookie monster
– cookie monster, Commented Aug 3, 2014 at 12:57
New line is \n or \r\n, if you want line breaks in your literal, escape them with a single backslash too — Paul S.
– Paul S., Commented Aug 3, 2014 at 12:58
Make the tag text/template, give it an id and use document.getElementById('id').textContent to get the string. jsfiddle.net/WfF57/1 — Jared Farrish
– Jared Farrish, Commented Aug 3, 2014 at 12:59
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. — gioch
– gioch, Commented Aug 3, 2014 at 13:06
@mplungjan not if it's an external js file? but I suppose we can't assume — Paul S.
– Paul S., Commented Aug 3, 2014 at 13:08

Ashish Balchandani · Accepted Answer · 2014-08-03 13:10:27Z

3

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

answered Aug 3, 2014 at 13:10

Ashish Balchandani

1,2761 gold badge9 silver badges14 bronze badges

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

1 Comment

Ashish Balchandani Over a year ago

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

Sanosay · Accepted Answer · 2014-08-03 13:27:37Z

1

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/

edited Aug 3, 2014 at 13:27

answered Aug 3, 2014 at 13:21

Sanosay

5785 silver badges20 bronze badges

Comments

Marco Bonelli · Accepted Answer · 2014-08-03 13:15:04Z

0

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

edited Aug 3, 2014 at 13:15

answered Aug 3, 2014 at 13:01

Marco Bonelli

71k21 gold badges129 silver badges153 bronze badges

6 Comments

mplungjan Over a year ago

You MUST escape the slash in </script>: <\/script> and if you use \n you do not need to use actual newlines

Marco Bonelli Over a year ago

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 Over a year ago

Yes it does. It ends the current script - try it <script>document.write('<script>alert("hello")</script>');alert('This will fail');</script>

Jared Farrish Over a year ago

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 Over a year ago

@mplungjan Oh yes, I didn't understand your comment in that way. You're right it needs to be escaped.

|

Collectives™ on Stack Overflow

Store Javascript code in javascript variable

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related