将html附加到jQuery元素而不在html中运行脚本

Question

我编写了一些带有一串html的代码,并使用jQuery清除掉任何丑陋的HTML(请参阅此SO问题中的早期原型).它工作得很好,但我偶然发现了一个问题:

当使用.append()将html包装在div中时,代码中的所有脚本元素都会被评估并运行(请参阅此SO答案以解释为什么会发生这种情况).我不想要这个,我真的只是希望它们被删除,但我可以在以后自己处理它,只要它们没有运行.

我正在使用此代码:

var wrapper = $('<div/>').append($(html));

我尝试这样做:

var wrapper = $('<div>' + html + '</div>');

但是这只会在IE中引入append()函数修复的"拒绝访问"错误(请参阅上面引用的答案).

我想我可能能够重写我的代码,不需要围绕html包装,但我不确定,我想知道是否有可能在不运行脚本的情况下附加html,无论如何.

我的问题:

• 如何在不运行脚本的情况下包装一段未知的html,最好完全删除它们？

• 我是否应该将jQuery抛出窗口并使用纯JavaScript和DOM操作来执行此操作？那会有帮助吗？

我不想做的事:

我不是试图在客户端放置某种安全层.我非常清楚这是毫无意义的.

更新:詹姆斯的建议

詹姆斯建议我过滤掉脚本元素,但看看这两个例子(原始的第一个和詹姆斯的建议):

jQuery("<p/>").append("<br/>hello<script type='text/javascript'>console.log('gnu!'); </script>there")

保留文本节点但写入gnu!

jQuery("<p/>").append(jQuery("<br/>hello<script type='text/javascript'>console.log('gnu!'); </script>there").not('script'))`

不写gnu!,但也丢失了文本节点.

更新2:

詹姆斯已经更新了他的答案,我接受了.不过,请参阅我对他的回答的最新评论.

Answer 1

如何首先删除脚本？

var wrapper = $('<div/>').append($(html).not('script'));

• 创建div容器
• 使用普通JS将html放入div
• 删除div中的所有脚本元素

假设html中的脚本元素没有嵌套在其他元素中:

var wrapper = document.createElement('div');
wrapper.innerHTML = html;
$(wrapper).children().remove('script');

var wrapper = document.createElement('div');
wrapper.innerHTML = html;
$(wrapper).find('script').remove();

这适用于html只是文本和html在任何元素之外的文本的情况.