[Flutter] html 파싱하기(http 포함)

Flutter에서 http 모듈을 사용하여 Response값 json 데이터만 파싱만 하다가 html를 파싱하는 상황이 생겨 다음에도 계속 참고자료로 사용할 수 있게 글을 납겨봅니다.

준비하기

• http, html 모듈 설치
• http 함수 만들기
• 리턴값 html 파싱

http, flutter_html 모듈 설치

우선 pubspec.yaml 에서 두 모듈을 추가해줍니다. 버전이 다른 수 있으니 사이트에서 참고해주세요


  # pubspec.yaml
  # https://pub.dev/packages/http
  http: ^1.1.0
  # https://pub.dev/packages/flutter_html
  flutter_html: ^2.2.1

모듈 import 하기

이제 모듈을 사용하기 위해서 상단에 import를 해주세요


import 'package:http/http.dart' as http;
import 'package:html/parser.dart' as htmlParser;

홈페이지에 Title 값 가져오는 함수 만들기

다음코드는 http를 이용하여 특정 홈페이지에 html를 가지고 와서 파싱하여 title값을 가져오는 코드입니다. 기본적으로는 querySelector를 이용하여 tag로 데이터를 파싱할 수 있으며 getElementById를 이용하여 id로 추출 할 수 있습니다.

Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://example.com')); // 원하는 웹 사이트의 URL로 바꾸세요.

    if (response.statusCode == 200) {
      final htmlString = response.body;
      final document = htmlParser.parse(htmlString);

      // 원하는 HTML 요소를 선택하고 값을 추출합니다.
      final titleElement = document.querySelector('title');

      // id 값으로 추출할경우 
            //final articleElement = document.getElementById('price');


      final title = titleElement?.text ?? '';

      setState(() {
        parsedData = title; // 원하는 정보로 변경하세요.
      });
    } else {
      // HTTP 요청이 실패한 경우 예외 처리를 추가할 수 있습니다.
      print('Failed to load HTML');
    }
  }

이 함수를 이용하여 만든 예제 코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:html/parser.dart' as htmlParser;

class HtmlParsingExample extends StatefulWidget {
  @override
  _HtmlParsingExampleState createState() => _HtmlParsingExampleState();
}

class _HtmlParsingExampleState extends State<HtmlParsingExample> {
  String parsedData = '';

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://example.com')); // 원하는 웹 사이트의 URL로 바꾸세요.

    if (response.statusCode == 200) {
      final htmlString = response.body;
      final document = htmlParser.parse(htmlString);

      // 원하는 HTML 요소를 선택하고 값을 추출합니다.
      final titleElement = document.querySelector('title');
      final title = titleElement?.text ?? '';

      setState(() {
        parsedData = title; // 원하는 정보로 변경하세요.
      });
    } else {
      // HTTP 요청이 실패한 경우 예외 처리를 추가할 수 있습니다.
      print('Failed to load HTML');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML Parsing Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(parsedData),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: HtmlParsingExample(),
  ));
}