文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >从从XMLHttpRequest返回的完整HTML页面中提取数组数据

问从从XMLHttpRequest返回的完整HTML页面中提取数组数据
EN

Stack Overflow用户
提问于 2022-04-11 21:08:02
回答 2查看 326关注 0票数 -1

我有一些JavaScript代码：

代码语言：javascript
复制
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if (req.readyState === 4) {
        var response = req.responseText;
        console.log(response);
    }
};

req.open('GET', 'https://circumvent-cors.herokuapp.com/https://weather.rap.ucar.edu/radar/displayRad.php?icao=KLWX&prod=BREF&bkgr=gray&endTime=-1&duration=2');
req.send(null);

它返回如下的HTML页面：

代码语言：javascript
复制
<!doctype html>
<html lang="en">
<head>
    <title>NEXRAD Level-II radar image(s) [KLWX BREF]</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="author" content="Gregory Thompson" />
    <meta name="copyright" content="(c) Copyright UCAR-University Corporation for Atmospheric Research All Rights Reserved" />
    <link rel="stylesheet" href="/assets/css/reset.css" />
    <!-- Include the SciAnimator CSS -->
    <link rel="stylesheet" href="/assets/css/scianimator.css" />
</head>
<body bgcolor="#FFFFFF">
  <h2>NEXRAD Level-II radar image(s) [KLWX BREF]</h2>
  <p align="left">
    Generated Mon, 11 Apr 2022  21:04:51 UTC by <a href="https://weather.ral.ucar.edu/radar">https://weather.ral.ucar.edu/radar</a>
    <br clear="all" />
  Please wait for <U>18</U> images to load.<br clear="all" />
  </p>
  <p align="left">
  <hr size="4" width="75%" />
<!-- Container elements in which SciAnimators will go -->
<div id="scianimator"></div>
<!-- Include jQuery -->
<script src="/assets/js/jquery-1.4.4.min.js"></script>
<!-- Include SciAnimator script. Choose your compression level. -->
<script src="/assets/js/jquery.scianimator.min.js"></script>
<!-- <script src="/assets/js/jquery.scianimator.js"></script> -->
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
$('#scianimator').scianimator({
  'controlPosition': 0,
  'images': ["../data/radar/20220411/KLWX/BREF/KLWX_20220411_190900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_191500_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_192200_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_192900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_193600_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_194200_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_194900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_195600_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_200300_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_201000_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_201600_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_202300_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_203000_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_204000_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_204500_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_204900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_205400_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_205800_BREF_gray.png"],
  'theme': 'dark',
  'delay': 250,
  'delayStep': 25,
  'dwellMultiplier': 4,
  'utf8': false
}).scianimator('play');
});
/*]]>*/
</script>
  </p>
</body>
</html>

我的问题是：如何解析该响应，从显示的响应中获取映像数组？ images数组位于$('#scianimator').scianimator({下面。我想使用这个数组并能够在scianimator中使用它，但我可以自己使用。

我只想知道如何从以后使用的响应中提取该数组。

javascript
html
jquery
xmlhttprequest
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-13 15:24:23

您可以使用正则表达式来提取数据。

​

代码语言：javascript
复制
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if (req.readyState === 4) {
        var response = req.responseText;
        var matches = response.match(/'images':\s*(\[.+?\])/);
        if (matches){
            img_arr = JSON.parse(matches[1]);
            console.log(img_arr);
        }
        else{
            console.log(':(');
        }
    }
};

req.open('GET', getURL());
req.send(null);

function getURL(){
    return 'https://circumvent-cors.herokuapp.com/https://weather.rap.ucar.edu/radar/displayRad.php?icao=KLWX&prod=BREF&bkgr=gray&endTime=-1&duration=2';
    //return `data:text/html,%3C!doctype%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3ENEXRAD%20Level-II%20radar%20image(s)%20%5BKLWX%20BREF%5D%3C%2Ftitle%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text%2Fhtml%3B%20charset%3DISO-8859-1%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22Content-Language%22%20content%3D%22en-us%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20name%3D%22author%22%20content%3D%22Gregory%20Thompson%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20name%3D%22copyright%22%20content%3D%22(c)%20Copyright%20UCAR-University%20Corporation%20for%20Atmospheric%20Research%20All%20Rights%20Reserved%22%20%2F%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22%2Fassets%2Fcss%2Freset.css%22%20%2F%3E%0A%20%20%20%20%3C!--%20Include%20the%20SciAnimator%20CSS%20--%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22%2Fassets%2Fcss%2Fscianimator.css%22%20%2F%3E%0A%3C%2Fhead%3E%0A%3Cbody%20bgcolor%3D%22%23FFFFFF%22%3E%0A%20%20%3Ch2%3ENEXRAD%20Level-II%20radar%20image(s)%20%5BKLWX%20BREF%5D%3C%2Fh2%3E%0A%20%20%3Cp%20align%3D%22left%22%3E%0A%20%20%20%20Generated%20Mon%2C%2011%20Apr%202022%20%2021%3A04%3A51%20UTC%20by%20%3Ca%20href%3D%22https%3A%2F%2Fweather.ral.ucar.edu%2Fradar%22%3Ehttps%3A%2F%2Fweather.ral.ucar.edu%2Fradar%3C%2Fa%3E%0A%20%20%20%20%3Cbr%20clear%3D%22all%22%20%2F%3E%0A%20%20Please%20wait%20for%20%3CU%3E18%3C%2FU%3E%20images%20to%20load.%3Cbr%20clear%3D%22all%22%20%2F%3E%0A%20%20%3C%2Fp%3E%0A%20%20%3Cp%20align%3D%22left%22%3E%0A%20%20%3Chr%20size%3D%224%22%20width%3D%2275%25%22%20%2F%3E%0A%3C!--%20Container%20elements%20in%20which%20SciAnimators%20will%20go%20--%3E%0A%3Cdiv%20id%3D%22scianimator%22%3E%3C%2Fdiv%3E%0A%3C!--%20Include%20jQuery%20--%3E%0A%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery-1.4.4.min.js%22%3E%3C%2Fscript%3E%0A%3C!--%20Include%20SciAnimator%20script.%20Choose%20your%20compression%20level.%20--%3E%0A%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery.scianimator.min.js%22%3E%3C%2Fscript%3E%0A%3C!--%20%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery.scianimator.js%22%3E%3C%2Fscript%3E%20--%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F*%3C!%5BCDATA%5B*%2F%0AjQuery(function(%24)%20%7B%0A%24('%23scianimator').scianimator(%7B%0A%20%20'controlPosition'%3A%200%2C%0A%20%20'images'%3A%20%5B%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_190900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_191500_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_192200_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_192900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_193600_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_194200_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_194900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_195600_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_200300_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_201000_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_201600_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_202300_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_203000_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_204000_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_204500_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_204900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_205400_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_205800_BREF_gray.png%22%5D%2C%0A%20%20'theme'%3A%20'dark'%2C%0A%20%20'delay'%3A%20250%2C%0A%20%20'delayStep'%3A%2025%2C%0A%20%20'dwellMultiplier'%3A%204%2C%0A%20%20'utf8'%3A%20false%0A%7D).scianimator('play')%3B%0A%7D)%3B%0A%2F*%5D%5D%3E*%2F%0A%3C%2Fscript%3E%0A%20%20%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E`;
}

​

票数 0
EN

Stack Overflow用户

发布于 2022-04-11 21:40:26

如果我正确理解了这种情况，数据并不包含在浏览器发送的html中；相反，html包含一些js，这些js在broswer呈现数据时获取数据。

我想说你有两个选择：

  1. (但很健壮)--使用像Puppeteer这样的库来自动化浏览器访问这个url，并在那里执行querySelector。

  1. --轻量级的浏览器(您认为更常见的工作方式)--访问链接，打开chrome的网络面板，并搜索页面发送的获取实际数据的请求。这可能是一个简单的POST请求
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71834326

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档