Why do I need to escape the '/' character in JavaScript? [duplicate]

Question

What exactly needs to be escaped in javascript strings. Or, more specifically, why does

var snaphtml = '<script src="http://seadragon.com/embed/lxe.js?width=auto&height=400px"></script>';

give a syntax error? Escaping the final <\/script> seems to fix the syntax error, but this doesn't make sense to me as a javascript beginner.

Answer 1

The problem may be that the web browser sees the "</script>" sequence and decides that's the end of the script block.

Another way to fix the problem aside from using an escape sequence like you did is to break it apart into 2 strings that are concatenated:

"<" + "/script>" 

The behavior you're seeing isn't a bug n the part of the browser.

Browsers don't "look inside" a script block, they just pass the content to the script engine. The "</script>" sequence is how they know they've come to the end of the block, and since the browser doesn't interpret the contents of the block, it has no way to know that it's in the context of a literal string in the script code.

Remember that browsers can support more script languages than just Javascript, even if it's not commonly seen. Internet Explorer supports VBscript (and I think any scripting language that can be run by a windows script host, but I'm not sure about that). And when the ability to have script blocks was put into browsers way back when, no one could be sure that Javascript would end up being so universal.

Answer 2

You're actually running into an html-escaping issue: the browser interprets </script> in your string as the close-tag for the script element in which your javascript is embedded -- so to the browser, your line looks like it's missing the close single-quote:

var snaphtml = '<script src="http://seadragon.com/embed/lxe.js?width=auto&height=400px">

To fix it, as you've found, you just need to change </script> to anything else, like <\/script> or \074/script>, etc.

The only characters you normally need to worry about in a javascript string are double-quote (if you're quoting the string with a double-quote), single-quote (if you're quoting the string with a single-quote), backslash, carriage-return (\r), or linefeed (\n).

Answer 3

The HTML parser will interpret the end of tag token (ETAGO delimiter </) in your string, as the end of the current script tag, giving you the unterminated string SyntaxError.

There are several workarounds, including the use of CDATA blocks, but the simplest way is to escape that character, or make a string concatenation:

var snaphtml = '<script src="...">\x3C/script>';

var snaphtml = '<script src="..."><' + '/script>';

And of course, you can also create your script element programmatically and append it to the head:

var newScript = document.createElement("script");
newScript.src = "..."; 
//...