我如何在颤振中解析html？答案

【问题标题】：how can i parse html in flutter?我如何在颤振中解析html？
【发布时间】：2020-10-16 01:03:39
【问题描述】：

我正在使用 Flutter 并想使用 parser.dart 解析 HTML

<div class="weather-item now"><!-- now  -->
   <span class="time">Now</span>
   
    <div class="temp">19.8<span>℃</span>
        <small>(23℃)</small>
    </div>
   
   <table>
       <tr>
           <th><i class="icon01" aria-label="true"></i></th>
           <td>93%</td>
       </tr>
       <tr>
           <th><i class="icon02" aria-label="true"></i></th>
           <td>south 2.2km/h</td>
       </tr>
       <tr>
           <th><i class="icon03" aria-label="true"></i></th>
           <td>-</td>
       </tr>
   </table>
</div>

使用，导入'package:html/parser.dart';

我想得到这个数据

现在，19.8,23,93%，南 2.2km/h

我该怎么做？

【问题讨论】：

你熟悉 XPath 吗？如果是，试试这个库：pub.dev/packages/xpath
可能最简单的方法是结合使用.substring() 和.indexOf()。

标签： flutter flutter-web flutter-http

【解决方案1】：

由于您使用的是 html 包，因此您可以使用一些 html 解析和字符串处理（根据需要）获得所需的数据，这是一个 dart 示例，您可以在您的颤振应用程序中使用 parseData 函数 -

main.dart

import 'package:html/parser.dart' show parse;

main(List<String> args) {
  parseData();
}

parseData(){
  var document = parse("""
    <div class="weather-item now"><!-- now  -->
   <span class="time">Now</span>
   
    <div class="temp">19.8<span>℃</span>
        <small>(23℃)</small>
    </div>
   
   <table>
       <tr>
           <th><i class="icon01" aria-label="true"></i></th>
           <td>93%</td>
       </tr>
       <tr>
           <th><i class="icon02" aria-label="true"></i></th>
           <td>south 2.2km/h</td>
       </tr>
       <tr>
           <th><i class="icon03" aria-label="true"></i></th>
           <td>-</td>
       </tr>
   </table>
</div>
  """);

  //declaring a list of String to hold all the data.
  List<String> data = [];

  data.add(document.getElementsByClassName("time")[0].innerHtml);

  //declaring variable for temp since we will be using it multiple places
  var temp  = document.getElementsByClassName("temp")[0];
  data.add(temp.innerHtml.substring(0, temp.innerHtml.indexOf("<span>")));
  data.add(temp.getElementsByTagName("small")[0].innerHtml.replaceAll(RegExp("[(|)|℃]"), ""));

  //We can also do document.getElementsByTagName("td") but I am just being more specific here.
  var rows = document.getElementsByTagName("table")[0].getElementsByTagName("td");

  //Map elememt to its innerHtml,  because we gonna need it. 
  //Iterate over all the table-data and store it in the data list
  rows.map((e) => e.innerHtml).forEach((element) {
    if(element != "-"){
      data.add(element);
    }
  });

  //print the data to console.
  print(data);
  
}

这是示例输出 -

[Now, 19.8, 23, 93%, south 2.2km/h]

希望对你有帮助！

【讨论】：

【解决方案2】：

This article 可能会有所帮助。它专门使用html 包解析器。

按照包自述文件中的示例，您可以轻松获得Document 对象。使用此对象，您可以使用getElementById、getElementsByClassName 和getElementsByTagName 等方法获取DOM 的特定Elements。从那里您可以获得每个返回的Element 的innerHtml，并将您想要的输出字符串放在一起。

【讨论】：