如何在Dart/Flutter中对URL进行解码以实现指定展示效果？

你需要对内容做两步处理：HTML实体解码、URI成分解码，具体实现如下：

方案1：使用HTML解析库（推荐，兼容性好） #

步骤1：添加依赖 #

在pubspec.yaml中加入HTML解析库：

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.4

执行flutter pub get安装依赖。

步骤2：完整处理代码 #

import 'dart:convert';
import 'package:html/parser.dart' as html_parser;
import 'package:html/dom.dart' as dom;

String processHtmlContent(String rawHtml) {
  // 第一步：解码HTML实体，把< "这类转义字符恢复
  const htmlEscape = HtmlEscape();
  String decodedHtml = htmlEscape.unescape(rawHtml);

  // 第二步：解析HTML找到所有a标签
  dom.Document document = html_parser.parse(decodedHtml);
  List<dom.Element> aTags = document.getElementsByTagName('a');

  for (var a in aTags) {
    // 解码href属性
    String? rawHref = a.attributes['href'];
    if (rawHref != null) {
      String decodedHref = Uri.decodeFull(rawHref);
      a.attributes['href'] = decodedHref;
    }
    // 解码a标签的文本内容
    String rawText = a.text;
    String decodedText = Uri.decodeFull(rawText);
    a.text = decodedText;
  }

  // 第三步：把处理后的DOM转回HTML字符串
  return document.outerHtml;
}

调用示例 #

void main() {
  String rawContent = r'Please use this link to see Ferret John profile <a href="http://example.com/path/to/page?name=ferret%20john" target="_blank">http://example.com/path/to/page?name=ferret%20john</a> and like it.';
  String result = processHtmlContent(rawContent);
  print(result); // 输出的内容里%20已经替换为空格
}

方案2：轻量正则替换（不需要第三方依赖，适合固定格式场景） #

如果你的内容格式固定，只有a标签里的URL需要解码，可以直接用正则匹配所有URL后替换：

import 'dart:convert';

String decodeUrlInText(String rawContent) {
  // 先解码HTML实体
  const htmlEscape = HtmlEscape();
  String decodedHtml = htmlEscape.unescape(rawContent);
  // 匹配URL的正则
  RegExp urlReg = RegExp(r'http[s]?://[^\s<>"]+');
  return decodedHtml.replaceAllMapped(urlReg, (match) {
    String url = match.group(0)!;
    return Uri.decodeFull(url);
  });
}

渲染提示 #

如果需要在Flutter界面里渲染可点击的富文本，可以直接用flutter_html库渲染处理后的HTML内容，不需要手动转成Widget。

内容的提问来源于stack exchange，提问作者Kamlesh