How can we parse HTML tags in Flutter

What we will cover in this post is

Read Html file from url

Parse html tags

Display updated html text on screen

Parse Html Data

Now we have html data which are fetched from url by using http package. Its time to parse that fetched content. By using below code we have parsed the html tags

For example in the tutorial page we have index of the chapters. Now we need to fetch all index title and href tag url

The Index div contains class name as chapters, so we will read all index data by parsing like below

var chapters = document.getElementsByClassName("chapters");
chapters.forEach((element) {
  var inner = element.innerHtml.toString();
  if (inner.contains("href")) {
    parse(inner).getElementsByTagName("li").forEach((element) {
      var list = element.innerHtml;

      if (list.contains("href")) {
        //  indexlist_local.add(list.substring(list.indexOf("href=")+6,list.indexOf(">")-1));
        indexlist_local.add(IndexContent(title: element.text,
            path: list.substring(
                list.indexOf("href=") + 6, list.indexOf(">") - 1)));
      }
    });
  }
});

Render Edited Html data on the screen

We have all edited html text, now we will show all index data in listview and its chapter content onscreen. Read How to load Html data in flutter using html_flutter plugin to load html data .

See Full source code for Parse HTML in Flutter