innerHTML将CDATA转换为评论 [英] innerHTML converts CDATA to comments

问题描述

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

我在Firefox中找到和Chrome，CDATA被转换为评论。

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

以下测试用例，当页面上的div为test时：

  document.getElementById（'test'）。innerHTML ='<！[CDATA [foo]]> bar'
  

导致以下HTML被附加到'test'div：

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

有什么办法可以使用javascript将含有CDATA的HTML逐字插入到文档中吗？ / p>

解决方案

document.createCDATASection 应该这样做，但是你的问题的真正答案是尽管HTML 5确实有 CDATA部分对他们的跨浏览器支持是很多的。 p>

编辑

CDATA部分不在HTML 4定义中，所以大多数浏览器都不会识别它们。

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

  function htmlWithCDATASectionsToHtmlWithout（html）{
 var ATTRS = ？：[^> \\'] | \[^ \] * \| \'[^ \'] * \'）*，
 / /具有RCDATA或CDATA内容的标签名称。 
 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 
[^&] ++ 
 //注释
|<！ - + ANY + - >+ 
 //常规标签
|< \ /？（?!+ SPECIAL_TAG_NAME +）[a-zA-Z]+ ATTRS + + 
 //特殊标签
|< \ /？+ 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 +> < \ /+ XMP +\\s *>+ 
 // CDATA部分捕获组1中的内容
|<！\\ [ CDATA\\ [（+ AN Y +）\\] \\]>+ 
 //一个松散小于
|<，g），
 
函数（token，cdataContent）{
 returnstring=== typeof cdataContent 
？ cdataContent.replace（AMP，& amp;）替换（LT，&）
 .replace（GT，&）
：token === < 
？ &安培; LT; //规范松散的少量。 
：令牌; 
}）; 
} 
  

给定

 < b取代; FOO< / b><！[CDATA并[d I>巴≤; / I>]]> 
  

它生成

 code>< b取代; FOO< / b>&安培; LT; I&安培; GT;栏&安培; LT / I和GT; 
  

并给出了一个看起来像一个脚本中的CDATA部分或其他特殊的标签或评论，它正确地没有它：

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

成为

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

I'm trying to insert some HTML into a page using javascript, and the HTML I'm inserting contains CDATA blocks.

I'm finding, in Firefox and Chrome, that the CDATA is getting converted to a comment.

The HTML is not under my control, so it's difficult for me to avoid using CDATA.

The following test case, when there is a div on the page with id "test":

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

causes the following HTML to be appeded to the 'test' div:

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

Is there any way I can insert, verbatim, HTML containing CDATA into a document using javascript?

解决方案

document.createCDATASection should do it, but the real answer to your question is that although HTML 5 does have CDATA sections cross-browser support for them is pretty spotty.

EDIT

The CDATA sections just aren't in the HTML 4 definition, so most browsers won't recognize them.

But it doesn't require a full DOM parser. Here's a simple lexical solution that will fix the problem.

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;
        });
}

Given

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

it produces

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

and given something that looks like a CDATA section inside a script or other special tag or comment, it correctly does not muck with it:

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

becomes

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

这篇关于innerHTML将CDATA转换为评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！