How to include an escaped<script> </script> tag in a JavaScript variable?

Question

I have a string in Javascript where I have to escape several characters:

<script>
function GenerateCode() {
     alert(ctry);
     var script = "<script async src=\"//somesite.com/feed/livetrend.js\"></script>";
}
</script>

I have tried the following to escape the characters:

var script = "<script async src=\"//somesite.com/feed/livetrend.js\"></script>";

However, this does not work correctly, despite having taken care of including an escape character \ in front of "

It an error -unterminated string constant.

Answer 1

The issue is that when the browser encounters the closing </script> tag inside a open <script> tag, regardless of the context in which it is used, it will terminate the script tag there. There are a couple of way to avoid this.

Option 1 - Escape the / in the closing script tag:

var script = '<script async src="//somesite.com/feed/livetrend.js"><\/script>';

Option 2 - Wrap the JavaScript in commented out HTML comments:

<script>
/*<!--*/
var script = '<script async src="//somesite.com/feed/livetrend.js"></script>';
/*-->*/
</script>

Using <![CDATA[ and ]]> instead of <!-- and --> also works.

One potential downside to this might be if you also want to have JavaScript strings that also contain these closing comments or CDATA, then it may not work.

Option 3 - Put the JavaScript into an external file:

Of course, moving the JavaScript into an external file will avoid this issue altogether, though it might not be preferable.

Answer 2

In addition to Alexander O'Mara's answer, and especially for cases when the string comes from user-generated content:

Option 4 - move the string to an HTML tag and retrieve it in your script

<input type=hidden id=escapedString
    value="&lt;script async src=&quot;//somesite.com/feed/livetrend.js&quot;&gt;&lt;/script&gt;" />

<script>
var script = escapedString.value;
</script>

This is a bit easier because all server-side environments and browsers provide standard HTML escaping methods, whereas escaping </script> is not well standardized and is error prone.

Answer 3

I think, the easiest way is to use backtick(`) instead of quotation marks.

For example:

var script = `<script async src="//somesite.com/feed/livetrend.js"></script>`;

Answer 4

What happens?

The browser HTML parser will see the </script> within the string and it will interpret it as the end of the script element.

A commonly used technique is to use the concatenation operator:

const test = '<script>...... </scr'+'ipt>';

That fixed my issue.