javascript - HTML entities inside script tag not converted?

Question

<script type="text/javascript">
    function test()    {
        alert('&lt;span&gt;blah&lt;span&gt;');
    }
</script>
<a href="#" onclick="test();">First</a><br />
<a href="#" onclick="alert('&lt;span&gt;blah&lt;span&gt;');">Second</a><br />
Third: &lt;span&gt;blah&lt;span&gt;

Demo: http://jsfiddle.net/LPYTZ/

Why is the first result different? Are <script> tags somehow excluded from entity conversion?

Answer 1

In HTML, script and style elements are defined in the DTD as containing CDATA. This means that entities and tags are ignored until the parser hits something that looks like an end tag.

XHTML is different and entities and tags inside those elements function as normal — but only when parsed as XHTML. You can explicitly mark content as CDATA with <![CDATA[ … ]]>.

Browsers will treat XHTML served as text/html using HTML rules which leads to a big ball of nasty as you try to write code that is correct under both sets of rules.

The simplest way to avoid problems is to keep scripts in external files and use the src attribute to include them.