unterminated string literal

Question

The following code:

var str= "<strong>English Comprehension<\/strong>
                    <br\/>
                    <ul>
                    <li>  Synonyms/Antonyms/Word Meaning (Vocabulary)<\/li>
                    <li>  Complete the Sentence (Grammar)<\/li>
                    <li>  Spot error/Correct sentence (Grammar/sentence construction)<\/li>
                    <li>  Sentence Ordering (Comprehension skills)<\/li>
                    <li>  Questions based on passage (Comprehension skills)<\/li>
                    <\/ul>
                    <br\/>";

Gives the error: "unterminated string literal". Whats the problem?

Answer 1

You can't split a string across lines like that in javascript. You could accomplish the same readability by making each line a separate string and concatenating them with the plus sign like so:

var str = "<strong>English Comprehension</strong>"
    + "<br />"
    + "<ul>"
    + "<li>Synonyms/Antonyms/Word Meaning (Vocabulary)</li>"

and so on...

Answer 2

If using multiline string in JavaScript you must use '\\' in the end of each line:

var str = "abc\
def\
ghi\
jkl";

Also beware extra whitespace if your code is indented.

Answer 3

I suggest to do it differently... have hidden element with that HTML eg

<div id="myHiddenDiv" style="display: none;"><strong>English Comprehension</strong>
<br />
...
</div>

Then simply read its inner HTML:

var str = document.getElementById("myHiddenDiv").innerHTML;

The big advantage is that you won't have to fight your way with literal strings and it's much easier to edit, the downside is that you add another element to the DOM. Your choice. :)

Answer 4

It is not a best practice to write multiline strings in Javascript.

But, you can do that with the \\ terminator:

var str= "<strong>English Comprehension<\/strong>\
                <br\/>\
                <ul>\
                <li>  Synonyms/Antonyms/Word Meaning (Vocabulary)<\/li>\
                <li>  Complete the Sentence (Grammar)<\/li>\
                <li>  Spot error/Correct sentence (Grammar/sentence construction)<\/li>\
                <li>  Sentence Ordering (Comprehension skills)<\/li>\
                <li>  Questions based on passage (Comprehension skills)<\/li>\
                <\/ul>\
                <br\/>";

Note that trailing spaces are part of the string, so it is better to get rid of them, unless they are intentional:

var str= "<strong>English Comprehension<\/strong>\
<br\/>\
<ul>\
<li>  Synonyms/Antonyms/Word Meaning (Vocabulary)<\/li>\
<li>  Complete the Sentence (Grammar)<\/li>\
<li>  Spot error/Correct sentence (Grammar/sentence construction)<\/li>\
<li>  Sentence Ordering (Comprehension skills)<\/li>\
<li>  Questions based on passage (Comprehension skills)<\/li>\
<\/ul>\
<br\/>";

Answer 5

A good way to concatenate strings in javascript is fallowing:

var stringBuilder = [];

stringBuilder.push("<strong>English Comprehension</strong>");
stringBuilder.push("<br />");
stringBuilder.push("<ul>");
...
var resultString = stringBuilder.join("");

This method faster than

var str = "a"+"b" +"c"

Answer 6

If you want to maintain your data in one block of string, try:

var str= "<strong>English Comprehension</strong>\n\
                <br />\n\
                <ul>\n\
                <li>  Synonyms/Antonyms/Word Meaning (Vocabulary)</li>\n\
                <li>  Complete the Sentence (Grammar)</li>\n\
                <li>  Spot error/Correct sentence (Grammar/sentence construction)</li>\n\
                <li>  Sentence Ordering (Comprehension skills)</li>\n\
                <li>  Questions based on passage (Comprehension skills)</li>\n\
                </ul>\n\
                <br />";

notice the \\n\\ at the end of each line.

Answer 7

JavaScript doesn't allow literal line breaks in strings unless you escape them with \\ :

var str= "<strong>English Comprehension<\/strong>\
    <br\/>\
    <ul>\
    <li>  Synonyms/Antonyms/Word Meaning (Vocabulary)<\/li>\
    <li>  Complete the Sentence (Grammar)<\/li>\
    <li>  Spot error/Correct sentence (Grammar/sentence construction)<\/li>\
    <li>  Sentence Ordering (Comprehension skills)<\/li>\
    <li>  Questions based on passage (Comprehension skills)<\/li>\
    <\/ul>\
    <br\/>";

You might look at ES2015+ template literals instead, which use backticks instead of ' or " and allow literal line breaks:

var str= `<strong>English Comprehension<\/strong>
    <br\/>
    <ul>
    <li>  Synonyms/Antonyms/Word Meaning (Vocabulary)<\/li>
    <li>  Complete the Sentence (Grammar)<\/li>
    <li>  Spot error/Correct sentence (Grammar/sentence construction)<\/li>
    <li>  Sentence Ordering (Comprehension skills)<\/li>
    <li>  Questions based on passage (Comprehension skills)<\/li>
    <\/ul>
    <br\/>`;

But of course, that only works on ES2015-compatible JavaScript engines (or if you transpile).

Note that within a template literal ${...} has special meaning (allowing you to substitute the result of any expression:

let v = "Ma";
console.log(`Look ${v}, no hands!`); // Look Ma, no hands!

Answer 8

Remove the newlines, it will work. GOTCHA to keep in mind ;) See it simple works all fine here without newlines: http://jsfiddle.net/87dYh/

var str= "<strong>English Comprehension<\/strong><br\/><ul>  <li>  Synonyms/Antonyms/Word Meaning (Vocabulary)<\/li>                  <li>  Complete the Sentence (Grammar)<\/li>                   <li>  Spot error/Correct sentence (Grammar/sentence construction)<\/li>     <li>  Sentence Ordering (Comprehension skills)<\/li>                  <li>  Questions based on passage (Comprehension skills)<\/li>                 <\/ul>              <br\/>";

alert(str);

Answer 9

My code was a response.write() where I needed to insert html to be outputted POST SUbmit on a form within an Iframe. When copying my code over from an text editor the carraige return carried over into the code window. Once I deleted my returns and whitespace between tags so that the code looked like a block paragraph that fixed the issue:

("loremIPSUM.<br><br><h2>Title</h2><br>loremIPSUM:<br><br><br><a href='http://url1'>lnk1</a><br><br><a href='http://url2'>loremIPSUMlnk2</a><br><br><a href='http://url3'>loremIPSUM</a><br><br><a href='url4'>IF THE case id is: "</a>"+value)