logo标签列表

如何使用纯 JavaScript 解析远程 HTML 页面

javascriptjqueryhtmlhtml-parsing
3

我有一个需求，需要解析远程html页面（例如：www.mywesite.com/home），我该如何获取此网站的html页面源代码并解析此页面

该html页面内容如下：

 <html>
     <body>
        <div class="my-class1">
             <a href="home/link?id=1">hello</a>
        </div>

        <div class="my-class1">
             <a href="home/link?id=2">hey</a>
        </div>

        <div class="my-class1">
             <a href="home/link?id=3">bye</a>
        </div>
     </body>
 </html>

i want output as

 hello
 hey
 bye

我不使用任何服务器端技术（如Java、.NET），我希望只使用JavaScript来实现这个功能。

是否可以使用纯JavaScript或任何其他jQuery插件解析远程HTML页面？

提前致谢。

11
由于同源策略，这是不可能的。 - Amberlamps
@Amberlamps，那么我还有其他方法可以实现吗？ - sunny
1
你只能在服务器端完成它。 - fredrik
@fredrik -（假设我理解正确）我不同意。我正在使用这种技术来通过ajax处理同源子页面。 - cc young
据我所理解，如果当前页面是从www.somedomain.com加载的，则无法使用ajax到www.someotherdomain.com，这就是他试图做的。当然，您可以随时禁用该策略。 - fredrik
@Fredrik - 你是对的。我没有意识到跨域问题的重要性。 - cc young
2个回答
2
普通的浏览器Javascript无法访问除自己服务器之外的任何服务器上的远程页面内容。你可以：
1. 在自己的服务器上编写一个协作脚本来获取远程内容； 2. 通过适当的CORS（http://en.wikipedia.org/wiki/Cross-origin_resource_sharing）安排，在远程服务器的协助下，可能能够访问内容； 3. 再次在远程服务器的协助下，如果它通过Javascript提供其内容，那么可以通过创建内联脚本元素来访问该内容。"JSONP"就是这种方法的一个例子； 4. 如果你编写了一个浏览器插件或附加组件——对于允许使用Javascript编写这些东西的浏览器来说——那么你不会像以前一样受到浏览器安全模型的限制。
-2

假设origin已固定等，这是我使用的方法：

// 获取html的body部分
txt = txt.substr( txt.indexOf('<body>')+6 );
txt = txt.substr( 0, txt.indexof('</body>')-1 );
// 将body放入div中
var div = document.createElement('div');
div.innerHTML = txt;
// 从每个元素中提取textContent（或更有趣的内容）
Array.prototype.slice( div.querySelectorAll('*') ).forEach( function(el) {
   if( el.textContent ) console.log( el.textContent );
});
我该如何从我的服务器获取远程服务器HTML页面的正文部分，比如stackoverflow.com页面？ - sunny
@sunny，你不能使用JavaScript，因为同源策略会阻止它，正如之前所述。你需要服务器端代码。 - Kevin B
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接