APIからhtmlの<p>タグが入ってきた!、取り除きたい!

htmlのタグが入ってきて困った😅

MicroCMSというサービスで、APIからデータをとってきて、View側にデータを表示したがhtmlの<p>タグが表示されてしまう💦

これ!

詳細ページに書いてるコードのText Widgetに正規表現を使って特定の文字を取りのぞく処理を追加したら解決できた!

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:onion_architecture/domain/blog_state.dart';

class DetailPage extends ConsumerWidget {
  const DetailPage({super.key, required this.responseModel});

  final ResponseModel responseModel;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ブログの詳細ページ'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              responseModel.title ?? 'No title',
              style: const TextStyle(fontSize: 30),
            ),
            const SizedBox(height: 20),
            Text(
              responseModel.content?.replaceAll(RegExp('<[^>]*>'), '') ??
                  'No content',
              style: const TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

まとめ

今回は、APIから取得したデータにhtmlのタグが入っていて、それを取り除く方法を正規表現でやってみました。正規表現ってエラーのバリデーションでしか使わないイメージだったので、新しい活用方法を見つけて参考になりました!

DartPadで実行できるサンプルも作りました!

void main() {
  String contentWithHtml = '<p>This is a paragraph.</p><p>This is another paragraph.</p>';
  String contentWithoutHtml = contentWithHtml.replaceAll(RegExp('<[^>]*>'), '');
  print(contentWithoutHtml);
}