Dart - 拆分 HTML 标签的内容

Posted 2023-05-07

【中文标题】Dart - 拆分 HTML 标签的内容

【英文标题】：Dart - Split content of HTML tags

【发布时间】：2021-06-04 01:59:21

【问题描述】：

所以我得到了这个匹配 html 标记内所有内容的正则表达式：

/(?<=<\s*\w+[^>]*>)(.*)(?=<\/\w+>)/gm

游乐场：https://regex101.com/r/WthKUd/3

正则表达式的作用：

(?<=<\s*\w+[^>]*>) 检查打开的 HTML 标记 (.*) - 检查任何字符 (?=<\/\w+>) - 检查关闭 HTML 标记

现在我需要对此进行调整，以便可以从标签中提取内容为List。

所以给定字符串：

<p>Lazy fox has <b>text</b> and <b>bold text again</b></p>

然后做：

<pattern>.allMatches('<p>Lazy fox has <b>text</b> and <b>bold text again</b></p>');

结果是：

[
  'Lazy fox has ',
  '<b>text</b>',
  ' and ',
  '<b>bold text again</b>'
]

它基本上应该将普通文本内容从 HTML 标记中分离出来，这样我就可以使用正确的样式填充 RichText 小部件。

我已经尝试以多种方式修改正则表达式，但我似乎无法让它将文本作为一个匹配组匹配并将标签作为另一个匹配组。

我将如何调整正则表达式来做我想做的事？

编辑：我非常了解现有的解析器，我们已经在使用 flutter_html，但它不能满足我们的一些需求，这就是为什么我要创建一个更简单、更精简的版本。

【问题讨论】：

我认为这个问题问得很好，但你真的想使用正则表达式吗？也许使用解析器会更好？

用 RegEx 解析 HTML 只会让已经很混乱的事情变得更糟。寻找一个不错的 HTML 解析器，不要手工制作胶带解决方案。

HTML 是嵌套范围，就像数学表达式中的括号一样。很难（但并非不可能）与正则表达式匹配。听取已经在这里发布的其他人的建议......为此放弃正则表达式。

我们已经使用了 flutter_html 包，但它不适合我们的需要，这就是为什么我们不得不创建自己的精简版解析器。希望这能弄清楚我为什么要这样做。

【参考方案1】：

这可能不是您正在寻找的解决方案，但我使用 flutter_html 包有一段时间了，渲染效果很好，也许您可​​以将 RichText 小部件切换到此依赖项？

有了这个依赖，你可以选择只渲染一些html标签而移除一些其他的。

【讨论】：

这不是我需要的，我已经检查过了。