Flutter에서 HTML 태그를 파싱하는 방법

Parse html 페이지를 편집하고 편집된 html 태그로 화면에 렌더링합니다. 저는 Google에서 많은 검색을 하고 pub.dev 패키지 센터의 flutter에서 html 태그를 구문 분석하는 플러그인을 찾습니다. 플러그인 이름은 html: 이 패키지를 사용하는 동안 찾은 버전은 html: ^0.15.0 입니다.

이번 포스팅에서 다룰 내용은

URL에서 HTML 파일 읽기

HTML 태그 구문 분석

업데이트된 html 텍스트를 화면에 표시

HTML 데이터 구문 분석



이제 http 패키지를 사용하여 URL에서 가져온 html 데이터가 있습니다. 가져온 콘텐츠를 구문 분석할 시간입니다. 아래 코드를 사용하여 html 태그를 구문 분석했습니다.

예를 들어 튜토리얼 페이지에는 장의 색인이 있습니다. 이제 모든 색인 제목과 href 태그 URL을 가져와야 합니다.

Index div에는 클래스 이름이 챕터로 포함되어 있으므로 아래와 같이 구문 분석하여 모든 인덱스 데이터를 읽습니다.

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)));
      }
    });
  }
});

편집된 Html 데이터를 화면에 렌더링

우리는 모든 html 텍스트를 편집했습니다. 이제 listview에 모든 색인 데이터를 표시하고 해당 장 내용을 화면에 표시합니다. html 데이터를 로드하기 위해 html_flutter 플러그인을 사용하여 flutter에서 Html 데이터를 로드하는 방법을 읽어보세요.

Parse HTML in Flutter에 대한 전체 소스 코드를 참조하십시오.