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+'<li>...' is changed to innerHTML + '<li>...' ?? — nickf
– nickf, Commented Nov 17, 2011 at 14:08
@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
– Joshua Walcher, Commented Nov 17, 2011 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
– Joshua Walcher, Commented Nov 17, 2011 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
– Joshua Walcher, Commented Nov 17, 2011 at 14:23

Alex K. · Accepted Answer · 2011-11-17 15:31:57Z

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, 2011 at 15:31

answered Nov 17, 2011 at 14:32

Alex K.

177k32 gold badges276 silver badges299 bronze badges

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

1 Comment

Hemlock Over a year ago

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 · Accepted Answer · 2011-11-17 19:38:27Z

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, 2011 at 19:38

answered Nov 17, 2011 at 15:36

Hemlock

6,2282 gold badges29 silver badges38 bronze badges

2 Comments

Joshua Walcher Over a year ago

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

And after I said my heredoc thing, I found this other Stack Overflow session which has a discussion of other possible solutions: stackoverflow.com/questions/805107/… Thanks, guys! I appreciate every one of you for reaching out.

david · Accepted Answer · 2011-11-17 14:22:52Z

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, 2011 at 14:22

david

4,3383 gold badges26 silver badges26 bronze badges

2 Comments

Hemlock Over a year ago

There is something wrong here, mixing the += and the =, I'm not sure what that accomplishes.

david Over a year ago

@Hemlock it replaces reference to the first innerHTML like if you where using concatenation in a loop

harriyott · Accepted Answer · 2011-11-17 14:26:44Z

0

The jQuery equivalent would be neater:

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

answered Nov 17, 2011 at 14:26

harriyott

10.7k10 gold badges69 silver badges104 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related