Why do I need to avoid the '/' character in JavaScript?

Question

What exactly should be avoided in javascript strings. Or rather, why

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

give syntax error? Turning off the final <\/script> seems like fixing a syntax error, but that doesn't make sense to me as a javascript starter.

Answer 1

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

Another way to fix the problem, besides using the escape sequence, as you did, is to break it into two lines that are combined:

 "<" + "/script>" 

The behavior you see is not a bug in the browser part.

Browsers do not "peek" into the script block, they simply pass the contents to the script engine. The sequence " </script> " is how they know that they have come to the end of the block, and since the browser does not interpret the contents of the block, it has no way of knowing that this is in the context of the string literal in the script code.

Remember that browsers can support more script languages ​​than just Javascript, even if this is not often observed. Internet Explorer supports VBscript (and I think that 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 back in browsers, when no one could be sure that Javascript would turn out so universal.

Answer 2

Actually, you are faced with the html-escaping problem: the browser interprets the </script> in your line as the close tag for the script tag that your javascript is embedded in - so your line in the browser looks like there is no missing single quote:

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

To fix this, as you have already found, you just need to change </script> to something else, like <\/script> or \074/script> etc.

The only characters you usually need to worry about in a javascript string are double quote (if you quote a double quote string), single quote (if you quote a single quote string) quote), backslash, carriage return (\ r) or line feed (\ n).

Answer 3

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

There are several workarounds, including using CDATA blocks, but the easiest way is to avoid this character or create 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 add it to the head:

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

Answer 4

See Everything You Always Wanted to Find Out About </ , Otherwise. End Tag Extender (ETAGO) for a detailed explanation. TL; DR there is no need for crazy hacks such as string concatenation or char literal screens - just avoid them as such:

 var snaphtml = '<\/script>'; 

Also note that this is only necessary for embedded scripts.