jQuery:在不执行脚本的情况下解析/操作HTML

时间:2009-05-21 20:45:50

标签: javascript jquery html ajax

我正在使用以下格式通过Ajax加载一些HTML:

<div id="div1">
  ... some content ...
</div>
<div id="div2">
  ...some content...
</div>
... etc.

我需要迭代响应中的每个div并单独处理它。具有映射到id的每个div的HTML内容的单独字符串将满足我的要求。但是,div可能包含脚本标记,我需要保留但不执行(当我将HTML粘贴到文档中时它们会稍后执行,因此在解析期间执行会很糟糕)。我的第一个想法是做这样的事情:

// data being the result from $.get
var clean = data.replace(/<script.*?</script>/,function() {
    // insert some unique token, save the tag, put it back while I'm processing
}); 

$('<div/>').html(clean).children().each( /* ... process here ... */);

但是我担心一些愚蠢的开发人员会出现并在其中一个div中添加这样的内容:

<script> var foo = '</script>'; // ... </script>

哪会搞砸了。更不用说,整个事情感觉就像一个黑客入手。有谁知道更好的方法吗?

编辑:这是我提出的解决方案:

var divSplitRegex = /(?:^|<\/div>)\s*<div\s+id="prefix-(.+?)">/g,
    idReplacement = preDelimeter+'$1'+postDelimeter;
var r = data.replace(<\/div>\s*$/,'').
    replace(divSplitRegex,idReplacement).split(preDelimeter);
$.each(r,function() {
    var content;
    if(this) {
        callback.apply(null,this.split(postDelimeter));
    }
});

其中preDelimiter和postDelimeter只是像“###这样的独特字符串我必须是一个白痴才能将这个字符串嵌入到我的内容中未转义,因为它会破坏所有内容###”,而回调是一个期待div的函数id和div内容。这只能起作用,因为我知道div只有一个id属性,而id会有一个特殊的前缀。我想有人可以在他们的内容中添加一个div,其id具有相同的前缀和它也会搞砸了。

所以,我仍然不喜欢这个解决方案。谁有更好的?

3 个答案:

答案 0 :(得分:3)

仅供参考,在任何JavaScript脚本中使用未转义都会在浏览器中导致此问题。开发人员无论如何都要逃避它,所以没有任何借口。所以你可以“信任”在任何情况下都会破坏。

<body>
 <div>
   <script>
     alert('<script> tags </script> are not '+
         'valid in regular old HTML without being escaped.');
   </script>
</body>

http://jsbin.com/itevu

看到它破裂。 :)

答案 1 :(得分:2)

在某些情况下,删除脚本标记会导致无效的html:

 <html>
    <head>
    </head>
    <body>
        <p>This should be
        <script type="text/javascript">
            document.writeln("<b");
        </script>>bolded</b>.
    </body>
 </html>

答案 2 :(得分:-2)

或许,替代方法对您有用。您可以使用以下函数来阻止JavaScript运行:

function preventJS(html) {
   return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" ');
}

它保留了DOM中的脚本标签,因此可以在以后使用脚本。

我在这里的博客中描述了这种方式 - JavaScript: How to prevent execution of JavaScript within a html being added to the DOM