StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="https://developer.mozilla.org/en/DOM/document.createCDATASection" rel="nofollow"><code>document.createCDATASection</code></a> should do it, but the real answer to your question is that although HTML 5 does have <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#cdata-sections" rel="nofollow">CDATA sections</a> cross-browser support for them is pretty spotty.</p> <p>EDIT</p> <p>The CDATA sections just aren't in the HTML 4 definition, so most browsers won't recognize them.</p> <p>But it doesn't require a full DOM parser. Here's a simple lexical solution that will fix the problem.</p> <pre><code>function htmlWithCDATASectionsToHtmlWithout(html) { var ATTRS = "(?:[^>\"\']|\"[^\"]*\"|\'[^\']*\')*", // names of tags with RCDATA or CDATA content. SCRIPT = "[sS][cC][rR][iI][pP][tT]", STYLE = "[sS][tT][yY][lL][eE]", TEXTAREA = "[tT][eE][xX][tT][aA][rR][eE][aA]", TITLE = "[tT][iI][tT][lL][eE]", XMP = "[xX][mM][pP]", SPECIAL_TAG_NAME = [SCRIPT, STYLE, TEXTAREA, TITLE, XMP].join("|"), ANY = "[\\s\\S]*?", AMP = /&/g, LT = /</g, GT = />/g; return html.replace(new RegExp( // Entities and text "[^<]+" + // Comment "|" + // Regular tag "|<\/?(?!"+SPECIAL_TAG_NAME+")[a-zA-Z]"+ATTRS+">" + // Special tags "|<\/?"+SCRIPT +"\\b"+ATTRS+">"+ANY+"<\/"+SCRIPT +"\\s*>" + "|<\/?"+STYLE +"\\b"+ATTRS+">"+ANY+"<\/"+STYLE +"\\s*>" + "|<\/?"+TEXTAREA+"\\b"+ATTRS+">"+ANY+"<\/"+TEXTAREA+"\\s*>" + "|<\/?"+TITLE +"\\b"+ATTRS+">"+ANY+"<\/"+TITLE +"\\s*>" + "|<\/?"+XMP +"\\b"+ATTRS+">"+ANY+"<\/"+XMP +"\\s*>" + // CDATA section. Content in capturing group 1. "|<!\\[CDATA\\[("+ANY+")\\]\\]>" + // A loose less-than "|<", "g"), function (token, cdataContent) { return "string" === typeof cdataContent ? cdataContent.replace(AMP, "&amp;").replace(LT, "&lt;") .replace(GT, "&gt;") : token === "<" ? "&lt;" // Normalize loose less-thans. : token; }); } </code></pre> <p>Given</p> <pre><code><b>foo</b><![CDATA[<i>bar</i>]]> </code></pre> <p>it produces</p> <pre><code><b>foo</b>&lt;i&gt;bar&lt;/i&gt; </code></pre> <p>and given something that looks like a CDATA section inside a <code>script</code> or other special tag or comment, it correctly does not muck with it:</p> <pre><code><script>/*<![CDATA[*/foo=bar<baz&amp;//]]></script><![CDATA[fish: <><]]> </code></pre> <p>becomes</p> <pre><code><script>/*<![CDATA[*/foo=bar<baz&amp;//]]></script>fish: &lt;&gt;&lt; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload