Javascript Error - Unterminated String Literal on concatenation if concatenated string has a space in it

Question

I have some occasions where I need to build a string via JavaScript to append to a HTML element.

My method has generally been to do something like this:

document.getElementById('theID').innerHTML=document.getElementById('theID').innerHTML+'<li>theString</li>';

and that works fine unless the appended string is advanced HTML that includes both JavaScript variables and text. In those cases it becomes a jumbled mess to maintain unless it still has the code spacing (whitespace).

Example of what I would like to have:

document.getElementById('theID').innerHTML=
document.getElementById('theID').innerHTML+
"<ul>
  <li><a href='"+varLink+"'>"+var1+"</a></li>
</ul>";

My problem is that it can't have it have any whitespace or I get an unterminated string literal on page load. Even a space after and before a '+' for concatenation causes the error. If I remove all whitespace from the string then it works fine, but like I said, it's hard to maintain/edit.

First off, is there a better way to do this through jQuery that won't generate that same error on page load? Barring that, is there some way to have the whitespace without getting the unterminated string literal?

are you saying that your above code works as is, but breaks if the `innerHTML+'
@nickf - yes, that is what I'm saying. adding a space either within the concatenated string (i.e. within quotes) or before or after a plus symbol in the contatenated string causes the unterminated string literal. I edited my example to show what I mean. — Joshua Walcher, Nov 17 '11 at 14:14
@Dave Newton - yeah, I spent several hours the first time I had this happen chasing that down, but it really is the whitespace (or more specifically, spaces) in the code that is causing the unterminated string literal. If I take the same code and remove all spaces, it works fine. — Joshua Walcher, Nov 17 '11 at 14:14
@DaveNewton - clarification - if I remove all spaces outside the quotes and tags, it works. It's fine to have spaces within any HTML element outputted to the browser, but not if it is outside the tag (i.e. Whitespace) or apparently outside the quotes next to the concatenation symbol. — Joshua Walcher, Nov 17 '11 at 14:23
Multi-line JS strings need to end with a `\`, you can't just embed a newline like that. — Dave Newton, Nov 17 '11 at 15:21
@DaveNewton - Thanks, I thought it was spaces, but you're right, it's line breaks. Good to know. — Joshua Walcher, Nov 18 '11 at 14:46

Alex K. · Answer 1 · 2011-11-17T15:31:57.777

2

You could use a single \ to escape, but its not really a good idea as its not part of the standard;

var s ="<ul> \r\n\
  <li><a href='"+varLink+"'>"+var1+"</a></li> \r\n\
  bla bla bla \r\n\
</ul>";

The only other way is to concatenate each part of the string individually.
Using an array can be efficient/readable;

var buff = [];
buff.push("<li>...");
buff.push("</ul>");
document.getElementById('theID').innerHTML += buff.join("\r\n");

edited Nov 17 '11 at 15:31

answered Nov 17 '11 at 14:32

Alex K.

171,639
30
264
288

1

Your buffer code will include the existing html twice since you use += to append the joined array. The `\r\n` seems unnecessary since as far as I can see the goal is just to make the code look neat. – Hemlock Nov 17 '11 at 15:27

Hemlock · Accepted Answer · 2011-11-17T19:38:27.710

1

Your problem isn't spaces, its line breaks in the middle of strings. You can get around that with \ but as Alex K mentioned, that is non standard.

For what its worth, I'd do something like this.

document.getElementById('theID').innerHTML += [ 
"<ul>",
  "<li><a href='", varLink, "'>", var1, "</a></li>",
"</ul>"
].join('');

Create an array, join the values and append them to innerHTML. You can add your whitespace for presentation without errors.

P.S. This is essentially Alex K's answer with some tweaks, I upvoted his.

edited Nov 17 '11 at 19:38

answered Nov 17 '11 at 15:36

Hemlock

6,130
1
27
37

Thanks for the explanation of the real cause of the problem. Although I still feel like there's got to be an easy way that I'm missing for just being able to type it like I want (maybe something like HEREDOC for PHP), both of your explanations give me a way to get it done without driving myself nuts trying to support it later. Thanks! – Joshua Walcher Nov 18 '11 at 14:42
And after I said my heredoc thing, I found this other Stack Overflow session which has a discussion of other possible solutions: http://stackoverflow.com/questions/805107/multiline-strings-in-javascript Thanks, guys! I appreciate every one of you for reaching out. – Joshua Walcher Nov 18 '11 at 14:59

score 0 · Answer 3 · answered Nov 17 '11 at 14:22

0

I don't know if this answers your question, but well if you wanted space you need to use + the way i know of getting it to work is like

document.getElementById('theID').innerHTML += 
 document.getElementById('theID').innerHTML = 
 "<ul>"+
 "  <li><a href='"+varLink+"'>"+var1+"</a></li>"+
 "</ul>";

 }

answered Nov 17 '11 at 14:22

david

4,218
3
23
25

There is something wrong here, mixing the += and the =, I'm not sure what that accomplishes. – Hemlock Nov 17 '11 at 15:29
@Hemlock it replaces reference to the first innerHTML like if you where using concatenation in a loop – david Nov 17 '11 at 15:45

score 0 · Answer 4 · answered Nov 17 '11 at 14:26

0

The jQuery equivalent would be neater:

$('#theID').append(...);

answered Nov 17 '11 at 14:26

harriyott

10,505
10
64
103

Javascript Error - Unterminated String Literal on concatenation if concatenated string has a space in it

4 Answers4