JavaScript Tutorials - Herong's Tutorial Examples - 2.33, by Herong Yang
Escaping 'script' Tags in String Literals
This section provides a tutorial example on how to use escape character in 'script' tags to prevent browser prematurely end embedded JavaScript code.
Now let's try to fix the problem we found in the previous section.
The first fix is to use the backslash character (\) to escape (/) in the </script> tag. This extra backslash will stop the browser to recognize this tag as the end of JavaScript code. At the same time, JavaScript engine will ignore this backslash and evaluate the string literal in the same way as without the extra backslash.
Here is the revised HTML document with the extra backslash character:
<html> <!-- Escape_Script_Tag_Backslash.html Copyright (c) 2002 HerongYang.com. All Rights Reserved. --> <head><title>Escaping Script Tags</title></head> <body><pre> <script type="text/javascript"> document.writeln("Question: How to use the <script> tag?"); document.writeln("Answer: <script>...Script Code...<\/script>"); document.writeln("Rate this answer: 1 | 2 | 3 | 4 | 5"); </script> </pre></body> </html>
If you run this example script in a browser, you will get:
Question: How to use the Rate this answer: 1 | 2 | 3 | 4 | 5
Better? Yes. But this is still not what we expected. Here is what happened when the browser processes this HTML document:
In another word, there is no code error in the JavaScript code now. The execution of the JavaScript code inserted the following content into the "document" object:
Question: How to use the <script> tag: Answer: <script>...Script Code...<\/script> Rate this answer: 1 | 2 | 3 | 4 | 5
When the browser renders this content, it will treat "script" tags as HTML tags, causing some text not showing on the final page.
See the next section on how to protect "script" tags in HTML documents.
Table of Contents
ECMAScript Language Specification and JavaScript Dialects
Data Types, Variables and Expressions
Creating, Accessing, and Manipulating Arrays
Defining and Calling Functions
►Web Browser Supporting JavaScript
JavaScript Support in Web Browsers
Including JavaScript Codes with HTML "script" Tags
type="text/javascript" or language="JavaScript"
JavaScript Version Supported by Browsers
Including 'script' Tags in String Literals
►Escaping 'script' Tags in String Literals
Using HTML Entities to Protect HTML Tags
Including JavaScript Codes as External Files
DOM API - The "document" Object
DOM API - The "window.open" Method
'javascript:' Pseudo-URL Addresses
JavaScript Console in Google Chrome
JavaScript Console in Mozilla Firefox
JavaScript Console in Apple Safari
JavaScript Console in IE (Internet Explorer)
Server-Side and Client-Side Web Scripting
Defining Your Own Object Types
Inheritance of Properties and Methods through the Prototype Object Chain
'jrunscript' - JavaScript Shell Command from JDK
Using Functions as "Function" Objects
Introduction to Built-in Object Types
W3C's Document Object Model (DOM) Specifications