C#中AngleSharp.HtmlParser解析HTML时生成空span问题

原始待解析HTML #

<div style="font-size: 16pt; font-weight: bold;">Заголовок</div>
<div>
<table style="font-family: Calibri; color: #646c71; font-size: 12pt;">
<tr><td style="width: 25%;">Строка 1:</td><td style="width: 75%;"><span class="simple-text">root</span></td></tr>
<tr><td style="width: 25%;">СТрока 2:</td><td style="width: 75%;"><span class="simple-text">08.05.2023 15:23:30</span></td></tr>

<span class="simple-text"><tr><td style="width: 25%;">Строка 3:</td><td style="width: 75%;">08.05.2023 15:23:46</td></tr></span>
<span class="simple-text"><tr><td style="width: 25%;">Строка 4:</td><td style="width: 75%;">fp</td></tr></span>
</table>
</div>

解析后出现空span的结果 #

<div style="font-size: 16pt; font-weight: bold;">Заголовок</div>
<div>
<span class="simple-text"></span><span class="simple-text"></span><table style="font-family: Calibri; color: #646c71; font-size: 12pt;">
<tbody><tr><td style="width: 25%;">Строка1:</td><td style="width: 75%;"><span class="simple-text">root</span></td></tr>
<tr><td style="width: 25%;">Строка 2:</td><td style="width: 75%;"><span class="simple-text">08.05.2023 15:23:30</span></td></tr>

<tr><td style="width: 25%;">Строка 3:</td><td style="width: 75%;">08.05.2023 15:23:46</td></tr>
<tr><td style="width: 25%;">Строка 4:</td><td style="width: 75%;">fp</td></tr>
</tbody></table>

原因分析 #

这是HTML规范兼容性修正导致的：

• 根据W3C标准，<table>元素的直接子节点只能是<thead>、<tbody>、<tr>这类表格专用元素，不能包含<span>这类行内元素。
• AngleSharp作为遵循标准的解析器，会自动修复不符合规范的结构：把包裹在<span>里的<tr>提取到表格内部的正确位置，原本的<span>因内容被移走，就变成空标签留在了表格外部。

解决办法 #

方法1：修正原始HTML（推荐） #

既然<span>不能直接放在<table>里包裹<tr>，直接调整结构：

• 若要给表格行加样式，把simple-text类直接加到<tr>上：

<tr class="simple-text"><td style="width: 25%;">Строка 3:</td><td style="width: 75%;">08.05.2023 15:23:46</td></tr>
<tr class="simple-text"><td style="width: 25%;">Строка 4:</td><td style="width: 75%;">fp</td></tr>

• 若不需要该样式类，直接删掉包裹<tr>的<span>即可。

方法2：解析后手动移除空标签（无法修改原始HTML时） #

在C#代码中，解析完成后查询所有空的simple-text span标签并移除：

using AngleSharp;
using AngleSharp.Html.Parser;

var htmlString = "你的原始HTML内容";
var parser = new HtmlParser();
var document = parser.ParseDocument(htmlString);

// 筛选所有空的simple-text span
var emptySimpleSpans = document.QuerySelectorAll("span.simple-text:empty");
foreach (var span in emptySimpleSpans)
{
    span.Remove();
}

// 获取修正后的HTML
var fixedHtml = document.DocumentElement.OuterHtml;

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