我希望能够抓取一个 HTML 页面并仅使用 Javascript 解析它，不接触服务器。
假设我可以获得 html 响应(解决了跨域问题)，我如何在完整的 html 文档上使用 jQuery？
例子是这样的( here is a full gist with a remote example ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Parent Page wanting to Parse Children</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta name="keywords" content="parent, html, parsing">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
// data looks like this:
var html = ""
html += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
html += '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'
html += ' <head> '
html += ' <title>Sub Page to Parse</title> '
html += ' <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><\/script>'
html += ' <meta name="keywords" content="parent, html, parsing"> '
html += ' </head> '
html += ' <body> '
html += ' <script type="text/javascript"> '
html += ' alert("im javascript"); '
html += ' setTimeout(function() { '
html += ' $("body").css("background-color", "#ffaaaa") '
html += ' }, 400); '
html += ' <\/script> '
html += ' <div id="child_div"></div> '
html += ' </body> '
html += '</html>'
// this works fine:
// $("#parent_div").append(html);
// $("#child_div")
// .width(100)
// .height(100)
// .css("background-color", "yellow")
// .append("<p>child text</p>");
// ... but that's not what I am trying to do...
// reason being: i don't want to add this sub-html page to the dom...
// I just want to scrape it for data...
// I want to do this, but I am getting null for every case:
var meta = $(html).find("meta");
alert(meta.html());
var title = $(html).find("title");
alert(title.html());
});
</script>
<div id="parent_div"></div>
</body>
</html>
问题是，var child_body = $(data).find("body");不给我任何东西。我不确定我应该如何使用 jQuery 遍历这个完整的 html 文档。我试图删除 <!DOCTYPE...>标记，但这作用不大。
这样的事情可能吗？
我一直在搞John Resig's Javascript HTML Parser但这还没有完全涵盖它。
有没有更合适的 XPath javascript 库？
最佳答案
问题不完全出在 jQuery 中，而是浏览器中的差异 .innerHTML执行。不同的浏览器以不同的方式处理这个问题，例如，在 Opera 中，您的示例工作正常，Firefox 可以调整，在 IE8 中，它可以调整一半，而 Chrome 会删除所有内容。
关键在于他们如何处理 .innerHTML打电话，这是什么jQuery uses internally什么时候creating document fragments .
Here's a quick test page using the exact HTML you have ，以及一些浏览器的结果:
Chrome 6(运行 alert()，去除几乎所有东西):
<div id="child_div"></div>
- 结果:
- 整个
<head>内容被剥夺，什么也得不到
- 整个
IE8(运行 alert()，它保留 <meta>，但作为顶级元素，test it in IE here):
<META name=keywords content="parent, html, parsing">
<DIV id=child_div></DIV>
- 结果:
-
$(html).filter("meta").attr("name"): "关键词" -
<title>被剥夺了
-
Firefox 3.6(运行 alert()，保留 <head> 内容，但再次作为顶级元素，test it here):
<title>Sub Page to Parse</title>
<meta name="keywords" content="parent, html, parsing">
<div id="child_div"></div>
- 结果:
-
$(html).filter("meta").attr("name"): "关键词" -
$(html).filter("title").html(): "要解析的子页面"
-
Opera 10.6(运行 alert()，仅去除脚本，test it here):
<head>
<title>Sub Page to Parse</title>
<meta name="keywords" content="parent, html, parsing">
</head>
<div id="child_div"></div>
- 结果:
-
$(html).find("meta").attr("name"): "关键词" -
$(html).find("title").html(): "要解析的子页面"
-
所以问题不在于 jQuery，而是不同的浏览器在他们的 .innerHTML 中做了什么剥离他们想要的任何东西的方法。这使得解析 <head> 中的任何内容特别不可靠，请注意当它被保留时，它可能是也可能不是顶级元素，例如 $(html).length会有所不同。
我会说你在这里有两个选择，但都不太吸引人:
- 通过服务器端调用发出请求，它会获取您想要的信息
- 自己解析 HTML，但在该部门您不会从 jQuery 中获益太多
抱歉，答案很糟糕，但似乎跨浏览器问题，除非你自己解析，否则将成为 killer ，并使 jQuery 几乎无用。
关于jquery - 使用 jQuery 抓取 HTML 文档，这可能吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3217632/