DEV Community

Cover image for How can we parse HTML tags in Flutter

How can we parse HTML tags in Flutter

I am an Android and Flutter Developer. Having 7+ Years of Experience in Mobile application development. Looking for article writers on my website.
Originally published at ・2 min read

Parse html page and render it on the screen with edited html tags. I do lot of search on google and find a plugin to parse html tags in flutter on package center, the plugin name is html: the version what i found while using this package is html: ^0.15.0 .

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

Alt Text

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)));
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)