javascript - innerHTML 将 CDATA 转换为注释

Question

我正在尝试使用 javascript 将一些 HTML 插入到页面中，而我插入的 HTML 包含 CDATA block 。

我发现，在 Firefox 和 Chrome 中，CDATA 正在转换为评论。

HTML 不在我的控制之下，所以我很难避免使用 CDATA。

下面的测试用例，当页面上有一个id为“test”的div时:

document.getElementById('test').innerHTML = '<![CDATA[foo]]> bar'

将以下 HTML 应用到“测试”div:

<!--[CDATA[foo]]--> bar

有什么方法可以使用 javascript 将包含 CDATA 的 HTML 逐字插入到文档中？

Answer 1

document.createCDATASection应该这样做，但你的问题的真正答案是，虽然 HTML 5 确实有 CDATA sections对它们的跨浏览器支持参差不齐。

编辑

CDATA 部分不在 HTML 4 定义中，因此大多数浏览器无法识别它们。

但它不需要完整的 DOM 解析器。这是一个简单的词法解决方案，可以解决这个问题。

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
        "|<!--"+ANY+"-->" +
        // 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;
        });
}

给定

<b>foo</b><![CDATA[<i>bar</i>]]>

产生

<b>foo</b>&lt;i&gt;bar&lt;/i&gt;

并且给定一些看起来像 script 或其他特殊标记或注释中的 CDATA 部分的东西，它不会正确地与它混淆:

<script>/*<![CDATA[*/foo=bar<baz&amp;//]]></script><![CDATA[fish: <><]]>

成为

<script>/*<![CDATA[*/foo=bar<baz&amp;//]]></script>fish: &lt;&gt;&lt;