在ASP.NET Core中从HTML字符串提取元素ID与对应值

问题场景 #

我有一段包含多行多列HTML表格的字符串，表格内每个<td>中的元素（input、textarea）都有唯一ID和对应值，需要在ASP.NET Core中提取这些元素的ID与其对应值。

示例HTML字符串 #

<table id="tblProducts" width="100%" border="1" style="text-align:center">
    <tbody>
        <tr>
            <td>
                <input style="width:100%; text-align:center" id="slNo" maxlength="100" value="1" readonly="">
            </td>
            <td>
                <textarea style="width: 100%; text-align: center" id="Description">TEST</textarea > 
            </td>
            <td>
                <textarea style="width: 100%; text-align: center" id="Specification">UU</textarea > 
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="HSNCode" value="uuu">
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="Unit" value="ii">
            </td>
            <td>
                <input type="number" style="width: 100%; text-align: center" id="Qty" onchange="calculateValue(this)" value="33">
            </td>
            <td>
                <input type="number" style="width: 100%; text-align: center" id="Rate" onchange="calculateValue(this)" value="33">
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="Value" class="totalTaxableValue" readonly="" value="1089">
            </td>
            <td>
                <button type="button" class="del_product btn btn-link" title="Delete" onclick="deleteRow()">
                    <span class="fa fa-trash" aria-hidden="true"></span>
                </button>
            </td>
        </tr>
        <tr>
                              <td>
                                  <input style="width:100%; text-align:center" id="slNo_2" maxlength="100" value="2" readonly="">
                              </td>
                              <td>
                                  <textarea style="width: 100%; text-align: center" id="Description_2">UU</textarea > 
                              </td>
                              <td>
                                  <textarea style="width: 100%; text-align: center" id="Specification_2">TEST</textarea > 
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="HSNCode_2" value="uu">
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="Unit_2" value="uu">
                              </td>
                              <td>
                                  <input type="number" style="width: 100%; text-align: center" id="Qty_2" onchange="calculateValue(this)" value="33">
                              </td>
                              <td>
                                  <input type="number" style="width: 100%; text-align: center" id="Rate_2" onchange="calculateValue(this)" value="33">
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="Value_2" class="totalTaxableValue" readonly="" value="1089">
                              </td>
                              <td>
                                  <button type="button" class="del_product btn btn-link" title="Delete" onclick="deleteRow()">
                                      <span class="fa fa-trash" aria-hidden="true"></span>
                                  </button>
                              </td>
                          </tr>

                      </tbody></table>

期望提取结果 #

id = "slNo" value = "1"
id = "Description" value = "TEST"
id = "Specification" value = "UU"
id = "HSNCode" value = "uuu"
id = "Unit" value = "ii"
id = "Qty" value = "33"
id = "Rate" value = "33"
id = "Value" value = "1089"
id = "slNo_2" value = "2"
id = "Description_2" value = "UU"
id = "Specification_2" value = "TEST"
id = "HSNCode_2" value = "uu"
id = "Unit_2" value = "uu"
id = "Qty_2" value = "33"
id = "Rate_2" value = "33"
id = "Value_2" value = "1089"

解决方案 #

在ASP.NET Core中，推荐使用HtmlAgilityPack库来解析HTML，这是处理HTML文档的成熟工具，能避免正则表达式解析HTML的各种问题。

步骤1：安装HtmlAgilityPack #

在项目中通过NuGet安装：

Install-Package HtmlAgilityPack

或者使用.NET CLI：

dotnet add package HtmlAgilityPack

步骤2：编写提取逻辑 #

创建一个方法，传入HTML字符串，解析并提取目标元素的ID和值：

using HtmlAgilityPack;
using System.Collections.Generic;

public static List<string> ExtractElementIdsAndValues(string htmlString)
{
    var result = new List<string>();
    var htmlDoc = new HtmlDocument();
    htmlDoc.LoadHtml(htmlString);

    // 选择所有input和textarea元素
    var elements = htmlDoc.DocumentNode.SelectNodes("//input | //textarea");
    if (elements == null) return result;

    foreach (var element in elements)
    {
        // 获取ID属性，跳过无ID的元素
        var idAttr = element.GetAttributeValue("id", string.Empty);
        if (string.IsNullOrEmpty(idAttr)) continue;

        // 根据元素类型获取对应值
        string value;
        if (element.Name.Equals("input", System.StringComparison.OrdinalIgnoreCase))
        {
            value = element.GetAttributeValue("value", string.Empty);
        }
        else if (element.Name.Equals("textarea", System.StringComparison.OrdinalIgnoreCase))
        {
            value = element.InnerText.Trim();
        }
        else
        {
            continue;
        }

        // 格式化结果字符串并添加到列表
        result.Add($"id = \"{idAttr}\" value = \"{value}\"");
    }

    return result;
}

步骤3：调用方法并输出结果 #

在需要的地方调用该方法，遍历结果即可得到期望的输出：

var html = "你的HTML字符串";
var extractedData = ExtractElementIdsAndValues(html);
foreach (var line in extractedData)
{
    Console.WriteLine(line);
}

说明 #

• 自动忽略没有ID的元素（比如示例中的button），只处理input和textarea
• 针对input元素提取value属性值，textarea提取内部文本并去除首尾空白
• 结果以列表形式返回，可直接遍历输出或保存到其他存储结构

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