Multi line string containing special characters in javascript?

Question

I'm trying to use the javascript port of processing found at http://ejohn.org/blog/processingjs/ I want to use the following constructor. Processing(CanvasElement, "some massive block of code"); I know javascript doesn't natively support multiline strings but is there a way to pass something like the following with out having to concatenate every line and escape every special character?

/**
 * Array. 
 * 
 * An array is a list of data. Each piece of data in an array 
 * is identified by an index number representing its position in 
 * the array. Arrays are zero based, which means that the first 
 * element in the array is [0], the second element is [1], and so on. 
 * In this example, an array named "coswav" is created and
 * filled with the cosine values. This data is displayed three 
 * separate ways on the screen.  
 */

size(200, 200);

float[] coswave = new float[width];

for (int i = 0; i < width; i++) {
  float amount = map(i, 0, width, 0, PI);
  coswave[i] = abs(cos(amount));
}

for (int i = 0; i < width; i++) {
  stroke(coswave[i]*255);
  line(i, 0, i, height/3);
}

for (int i = 0; i < width; i++) {
  stroke(coswave[i]*255 / 4);
  line(i, height/3, i, height/3*2);
}

for (int i = 0; i < width; i++) {
  stroke(255 - coswave[i]*255);
  line(i, height/3*2, i, height);
}

Greg · Accepted Answer · 2009-01-20 12:04:42Z

3

Javascript actually does support multi-line strings: append a backslash to the end of each line:

alert('1\
    2\
    3');

Not very pretty, but it works.

An alternative would be to use a script to encode your text... I'd suggest PHP as it's a 1-liner:

<?=json_encode('your text');?>

answered Jan 20, 2009 at 12:04

Greg

323k55 gold badges378 silver badges338 bronze badges

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

1 Comment

AnthonyWJones Over a year ago

+1. And I thought I knew every nuance of Javascript syntax. Nice answer.

Community · Accepted Answer · 2017-05-23 10:32:49Z

1

For a more maintainable solution, I would place it in script tags tags in the body of the page, eg:

<script type="text/processing" id="code">
/**
 * Array. 
 * ...
 */

size(200, 200);
...
</script>

And construct your Processing object like:

var canvas = document.getElementById('canvas');
var code = document.getElementById('code');
Processing(canvas , code.textContent);

For a quick and dirty solution run your processing code through a JSON encoder as RoBorg suggested and you'll get a string that you can just copy and paste into the second parameter.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jan 20, 2009 at 12:48

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

Comments

AnthonyWJones · Accepted Answer · 2009-01-20 12:02:59Z

0

Place the "massive block of code" in its own file on the server, fetch with AJAX and ensure it has reasonable cache headers.

answered Jan 20, 2009 at 12:02

AnthonyWJones

190k35 gold badges236 silver badges307 bronze badges

1 Comment

Jared Over a year ago

This is a quick and dirty solution to a problem so don't want to go the ajax route if I can avoid it. See this question. stackoverflow.com/questions/460085/…

PhiLho · Accepted Answer · 2009-01-20 12:09:57Z

0

Alternatively, you can just put the text in the HTML page (hidden, for example) and get it from there...

answered Jan 20, 2009 at 12:09

PhiLho

41.3k6 gold badges100 silver badges136 bronze badges

Comments

vava · Accepted Answer · 2009-01-20 12:11:53Z

0

Another option would be to use E4X literals

var s = "" + <r><![CDATA[
line 1
line 2
]]></r>;

Although I doubt it is supported by IE6.

answered Jan 20, 2009 at 12:11

vava

25.5k11 gold badges67 silver badges79 bronze badges

1 Comment

Greg Over a year ago

It's not even supported by IE7

Collectives™ on Stack Overflow

Multi line string containing special characters in javascript?

5 Answers 5

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related