获取字符串<body></body>中的内容

我想做以下操作。

$("a").click(function (event) {
    event.preventDefault();
    $.get($(this).attr("href"), function(data) {
        $("html").html(data);
    });
});

我希望所有超链接的行为都能进行ajax调用并检索html。

不幸的是，您不能简单地用ajax响应中收到的html替换当前html。

如何仅获取ajax响应的<body> </body>标记中的内容，以便我可以仅替换现有html中正文的内容。

编辑：<body>打开标签并不总是只有<body>，它有时可能有一个类，例如

<body class="class1 class2">

如果我理解正确，请使用正则表达式获取body标记之间的内容。

$.get($(this).attr("href"), function(data) {
    var body=data.replace(/^.*?<body>(.*?)</body>.*?$/s,"$1");
    $("body").html(body);
});

编辑

根据你下面的评论，这里有一个更新，可以匹配任何身体标签，无论其属性如何：

$.get($(this).attr("href"), function(data) {
    var body=data.replace(/^.*?<body[^>]*>(.*?)</body>.*?$/i,"$1");
    $("body").html(body);
});

正则表达式为：

^               match starting at beginning of string
.*?             ignore zero or more characters (non-greedy)
<body[^>]*>     match literal '<body' 
                    followed by zero or more chars other than '>'
                    followed by literal '>'
(               start capture
  .*?           zero or more characters (non-greedy)
)               end capture
</body>        match literal '</body>'
.*?             ignore zero or more characters (non-greedy)
$               to end of string

添加"i"开关以匹配大小写。

请忽略我关于"s"开关的评论，在JavaScript中，所有RegExp默认情况下都是单行的，为了匹配多行模式，您添加了"m"。（该死的Perl，当我写JavaScript时会干扰我！：-）

我不想弄乱正则表达式。相反，我创建了一个隐藏的<iframe>，加载其中的内容，并从页面的onload()中的<iframe>中提取<body>。

我需要小心iframe的同源策略（本文展示了方法）：

var iframe = document.createElement('iframe');
iframe.style.display = "none";
jQuery('body').append(iframe);
iframe.contentWindow.contents = data;
iframe.onload = function () {
    var bodyHTML = jQuery(iframe).contents()
                        .find('body').html();
    // Use the bodyHTML as you see fit
    jQuery('#error').html(bodyHTML);
}
iframe.src = 'javascript:window["contents"]';

完成后只需移除<iframe>。。。

请确保将事件绑定到按类筛选的文档（$(document).on('click', '.my-class-name', doThings);）。如果替换主体的html，则在使用新html重新绘制DOM时，任何直接完成的事件绑定（$('.my-class-name').on('click', doThings);）都将被销毁。重新绑定是可行的，但它也会从旧事件和节点中留下一堆指针，垃圾收集器必须清理这些指针——简单地说，它可能会使页面打开的时间越长，变得越来越重。

我还没有在多个平台上测试过，请谨慎使用。

// create a new html document
function createDocument(html) {
  var doc = document.implementation.createHTMLDocument('')
  doc.documentElement.innerHTML = html
  return doc;
}
$("a").click(function (event) {
    event.preventDefault();
    $.get($(this).attr("href"), function(data) {
        $("body").html($(createDocument(data)).find('body').html);
    });
});

相关内容

最新更新

热门标签：