javascript - jQuery 在 AJAX 响应字符串中查找脚本标签

Question

我正在使用 jQuery 提取 AJAX 响应 HTML 字符串。当我将此响应附加到文档时，我有一些冲突的脚本，所以我想删除它，并且仅在删除有问题的原始脚本后才放置它。

这是我的代码(位于 ajax 的成功函数中):

var content = $(response).find('.content').html();
var scripts = $(content).find('script');
console.log(scripts);

此代码返回 0 个脚本。但是，当我这样做时:

var content = $(response).find('.content').html();
var scripts = $(content).find('h3'); //PULLING H3s INSTEAD OF SCRIPT TAGS
console.log(scripts);

它返回该字符串中的所有 h3。这是怎么回事？

我可以确认脚本在响应字符串中。

感谢大家的帮助。我最终在文档中使用了隐藏的输入，然后在这些值上使用了 $.getScript() 。现在一切正常。

Answer 1

当您执行 $(response) 时，脚本标签将被剥离并执行。相反，您应该使用正则表达式将脚本标记替换为 div，然后在将其转换为 DOM 节点后，选择所述 div，迭代它们并处理它们。

一种方法是:

function cleanInsert(html, target, htmlSelector, filter) {
    var outHTML = html, $content = $(target);
    outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</script');
    outHTML = $("<div>").html(outHTML);
    outHTML = htmlSelector ? outHTML.find(htmlSelector) : outHTML.children();
    if (filter) {
        outHTML = filter.call(outHTML);
    }
    var scripts = outHTML.filter('div.iscript').detach();
    scripts.add(outHTML.find('div.iscript').detatch());
    $content.html(outHTML);
    scripts.each(function() {
        var $this = $(this),
            s = document.createElement("script");
        if ($this.attr('src') != "") {
            s.src = $this.attr('src');
        } else {
            s.nodeValue = $this.text();
        }
        $content[0].appendChild(s);
    });
}​
//                   insert target response filter
cleanInsert(response, "#targetel", ".content");

没有经过严格测试。