jsoup 使用总结4--高级用法之 script js 脚本

2018-04-13 17:28:33

大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询;具体使用方法可以参考jsoup官网文档
那么你有没有实际操作过,查找script js 脚本呢,因为很多时候页面的内容是根据js动态生成的,或者数据是动态变更;那么这个时候,我们只是获取html页面中script js脚本之间的内容。

部分html代码:

<div class="example_row">
    <a href="http://www.example.com/news.html" target="_blank">真相</a></h3>
    <a href="http://www.example.com/news/cat/13" target="_blank">今日头条</a>
    <a href="http://www.example.com/news/cat/16" target="_blank">各地新闻</a>
    <a href="http://www.example.com/news/cat/14" target="_blank">行业报告</a>
    <a href="http://www.example.com/news/cat/15" target="_blank">政府政策</a>
    <a href="http://www.example.com/news/cat/18" target="_blank">疾病防护</a>
    <a href="http://www.example.com/news/cat/20" target="_blank">科普</a></div>....<script type="text/javascript">
    var result = {key1:value1, key2:value2 ...}</script>

java代码:

Document doc = Jsoup.connect("www.example.com").timeout(0).get();
Elements links = doc.select("div.example_row").select("a");for(Element link : links)
{
   String linkHref = link.attr("href"); 
   String linkText = link.text();
   ...
}
Element link = doc.select("a").first();
Element link_2 = doc.select("a").last();

上面的方式就可以帮我们查找到js 中的数据。

还有一种我在实际工作中遇到的情况, js 很复杂,并不像上面的那么一下子就可以catch到:
html代码:

<script type="text/javascript">
     var result = {key1:value1, key2:value2 ...}
     var option_1 = {
color: ['#79b05f', '#e58c65'],
tooltip : {
    trigger: 'change'},
legend: {
    data:['标准1','标准2']
},
xchange : [
    {
        type : 'category',
        boundaryGap : false,
        data : ["22\u65e501\u65f6","22\u65e502\u65f6","22\u65e502\u65f6","22\u65e503\u65f6","22\u65e503\u65f6","22\u65e504\u65f6","22\u65e504\u65f6","22\u65e505\u65f6","22\u65e505\u65f6","22\u65e506\u65f6","22\u65e506\u65f6","22\u65e507\u65f6","22\u65e507\u65f6","22\u65e508\u65f6","22\u65e508\u65f6","22\u65e509\u65f6","22\u65e509\u65f6","22\u65e58\u65f6","22\u65e58\u65f6","22\u65e511\u65f6","22\u65e511\u65f6","22\u65e512\u65f6","22\u65e512\u65f6","22\u65e513\u65f6"],
        changeLine: {
          lineStyle : {
            color: '#d4d4d4'
          }
        }
    }
],
ychange : [
    {
        type : 'value',
        changeLabel : {
            formatter: '{value}'
        },
        changeLine: {
          lineStyle : {
            color: '#d4d4d4'
          }
        }
    }
],
series : [
    {
        name:'标准1',
        type:'line',
        data:[37,37,37,162,162,167,167,40,40,44,44,46,46,48,48,47,47,166,166,39,39,38,38,163]          },
    {
        name:'标准2',
        type:'line',
        data:[83,84,84,12,12,124,124,132,132,20,20,24,24,28,28,25,25,123,123,88,88,85,85,2]          }
]
};
...
     
</script>

那么针对这种情况jsoup如何破解呢,享受在jsoup的便捷中,思考,搜索,仍然误解;
发现这种问题jsoup还真解决不了。
那就换正则表达式试试。这里推荐一个在线正则工具 regexr
换了正则,然后不停的try,终于ok了:
java 代码:

Document doc = Jsoup.connect("www.example.com").timeout(0).get();
Elements scripts = doc.select("script");for(Element script : scripts)
{   if(script.html().contains("var option_1 =")) //注意这里一定是html(), 而不是text()
   {      String str = data.html().replace("\n", ""); //这里是为了解决 无法多行匹配的问题
      String pattern = "var option_1 = \\{(.*?)\\};"; //()必须加,

      Pattern r = Pattern.compile(pattern,Pattern.MULTILINE);// Pattern.MULTILINE 好像没有什么用,所以才使用上面的replace
      Matcher m = r.matcher(str);      if(m.find())
      {        String option_1 = m.group();
        option_h24 = option_h24.replace("var option_1 = ", "");
        JSONObject json = new JSONObject(option_1);
         ...
      }
   }
   ...
}

希望能解决你手边的问题。

另外推荐阅读jsoup的官网文档,我80%的问题都在官网找到了方法。

  • 2020-02-22 17:35:14

    使用tweenjs写一个发牌的demo

    移动端h5的三大抽奖方式:转盘,老虎机,翻纸牌。 前两样demo比较多,用户也审美疲劳了。这次微信公众号要抽奖,于是调研了下翻纸牌。

  • 2020-02-22 17:45:43

    tweenjs简单快速学习

    tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。 tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。

  • 2020-02-22 17:47:12

    easeJs入门学习教程

    createjs中包含以下四个部分: EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控) TweenJS:用于做动画效果 SoundJS:音频播放引擎 PreloadJS:网站资源预加载

  • 2020-02-22 17:54:59

    最新FullCalendar中文文档

    Fullcalendar是一款用来管理日程安排、工作计划的日历工具,它功能非常强大而且非常实用。而目前网络上没有很好的中文文档,为了更好的和大家分享Fullcalendar的相关使用,即日起计划将Fullcalendar的英文文档翻译成中文版。

  • 2020-02-22 17:57:05

    nuxtjs支持api接口,serverMiddleware

    Who can’t relate to this: You’ve built a small portfolio page for someone, maybe a company, a friend or yourself. And the only API endpoint you’d need is one for a form. What now? Scaffolding a new service just for this one endpoint?

  • 2020-02-22 17:59:34

    FullCalendar插件的基本使用带详细配置翻译

    前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求

  • 2020-02-22 18:03:10

    Vue组件中使用Sass或者Less全局变量

    本文以Sass做案例,Less的参考,基本配置大同小异。 假如我们有一个Sass的全局变量common.scss文件,路径 ../style/common.scss 代码如下: