如何使用 Jquery 从其他网站的抓取 HTML 代码中选择所有 div？答案

【问题标题】：How to select all div's from the scraped HTML code of other website using Jquery?如何使用 Jquery 从其他网站的抓取 HTML 代码中选择所有 div？
【发布时间】：2016-10-04 23:37:16
【问题描述】：

我正在开发 chrome 扩展程序，然后我正在调用 XMLHttpRequest 以从 另一个网站 获取数据并将其存储在变量中稍后使用 Jquery 解析。

我在变量 parseText 变量中得到了整个 html 源代码。

主要问题是在parseText变量中找到所有具有特定类名的div，然后一个接一个循环，将数据填充到popup.html中。

您能帮我解析 html 数据并使用特定的类名提取 div 吗？

我的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
        <title>Youtube Chrome Extenstion</title>

    </head>
    <body>
        <div class="container">
          <h4>Hello Cricbuzz</h4>
          <div class="" id="y">

          </div>
        </div>


        <!-- Main functionality js  -->
        <!-- <script src="scripts/main.js" charset="utf-8"></script> -->

        <script src="scripts/loadapi.js" charset="utf-8"></script>

        <!-- Jquery Required for bootstrap -->
        <script src="scripts/jquery.js" charset="utf-8"></script>
        <!-- bootstrap Javascript -->
        <script src="scripts/bootstrap.min.js" charset="utf-8"></script>
    </body>
</html>

LoadApi.js 文件代码在这里。它的主要功能是从特定站点获取数据，然后将其存储在变量中。

console.log("Hello api call");

var xhr= new XMLHttpRequest();
xhr.open('GET', 'http://www.cricbuzz.com/cricket-match/live-scores', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; // or whatever error handling you want
    //document.getElementById('y').innerHTML= this.responseText;
    //console.log(this.responseText);

    var $parseText = this.responseText;
    //console.log($parseText);
    //PROBLEM HERE HOW TO FIND ALL DIVS USING CLASS NAME BELOW
    $parseText.find(".cb-col.cb-col-100.cb-lv-main")

};
xhr.send();

manifest.json

"content_scripts": [{
        "matches": ["http://www.cricbuzz.com/"],
        "js": ["scripts/jquery.js", "scripts/main.js"]
    }, {
        "matches": ["http://*/* " , "https://*/*"   ],
        "js": ["scripts/loadapi.js"]
    }],
    "permissions": [
        "activeTab",
        "tabs"
    ],
    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    },

    "browser_action": {
        "default_icon": "images/icon_128.png",
        "default_popup": "popup.html"
    }
}

预期输出：

在这一点上感到震惊：

【问题讨论】：

请说明问题 - 预期输出与实际输出以及来自控制台的可能错误消息
1：你不能只访问另一个网站，除非它支持 CORS。 2. 你应该使用 $.ajax 而不是 httpxmlrequest。
你应该得到服务器上的分数：github.com/psibi/cricbuzz
试试这样var $parseText = $(this.responseText);var ele = $(".cb-col.cb-col-100.cb-lv-main",$parseText);

标签： javascript jquery twitter-bootstrap google-chrome parsing

【解决方案1】：

获取这样的数据确实不切实际，但如果必须的话

<script>
var uglyText  = "<div class='tofind'>good data</div><div class='noneed'>bad data</div><div class='tofind'>good data</div><div class='noneed'>bad data</div><div class='tofind'>good data</div><div class='noneed'>bad data</div>";

var lessThanUglyText = uglyText.split('<div'); // Split based on divs

var goodData = [];
var goodDataCount = 0;


for(var i = 0; i < lessThanUglyText.length; i++)
{
    if(lessThanUglyText[i].indexOf('tofind') == -1) // doesn't have class we want
    continue;
    goodData[goodDataCount] = lessThanUglyText[i].replace('</div>', ''); // trim the end
    goodDataCount++;    
}

for(var i = 0; i < goodData.length; i++)
{
    goodData[i] = goodData[i].substring(goodData[i].indexOf(">") + 1); // get what's inside the divs

}
</script>;

注意：这假定您要查找的类不能显示为普通文本，并且彼此之间没有嵌套的 div 以及没有 > 内部数据。有很多限制，但这是一个通用的解决方案。

【讨论】：

您能否发布一个完整的 div 以及您想要的内容？