如何解析具有相同 class 名称的 table 单元格中的值

Question

我试图通过控件 WebView2

获取具有相同 class 名称的 table 单元格中的值

获取单个值很有用，但现在我想考虑可能恰好有多个值。 table 完整的 html 代码是：

<tbody data-v-39c7db2a=""><tr data-v-39c7db2a=""><td data-v-39c7db2a="" class="text-left">12-31 19:57:47</td> <td data-v-39c7db2a="" class="text-center">Limit</td> <td data-v-39c7db2a="" class="text-center market">KIBA/USDT</td> <td data-v-39c7db2a="" class="text-left price price-down">
                                0.00003888
                            </td> <td data-v-39c7db2a="" class="amount leftAmount text-left"><span data-v-39c7db2a=""><!---->
                                    100
                                    KIBA
                                </span></td> <td data-v-39c7db2a="" class="text-left total">
                                0.00388800
                                
                                USDT
                            </td> <td data-v-39c7db2a="" class="text-right">
                                0.0000%
                            </td> <td data-v-39c7db2a="" class="text-right"><span data-v-39c7db2a="" class="cancel ordersO_title_cancelall">Cancel</span></td></tr><tr data-v-39c7db2a=""><td data-v-39c7db2a="" class="text-left">12-31 19:43:51</td> <td data-v-39c7db2a="" class="text-center">Limit</td> <td data-v-39c7db2a="" class="text-center market">KIBA/USDT</td> <td data-v-39c7db2a="" class="text-left price price-down">
                                0.00003890
                            </td> <td data-v-39c7db2a="" class="amount leftAmount text-left"><span data-v-39c7db2a=""><!---->
                                    100
                                    KIBA
                                </span></td> <td data-v-39c7db2a="" class="text-left total">
                                0.00389000
                                
                                USDT
                            </td> <td data-v-39c7db2a="" class="text-right">
                                0.0000%
                            </td> <td data-v-39c7db2a="" class="text-right"><span data-v-39c7db2a="" class="cancel ordersO_title_cancelall">Cancel</span></td></tr></tbody>

而table中每一行的代码是：

<tr data-v-39c7db2a=""><td data-v-39c7db2a="" class="text-left">12-31 19:57:47</td> <td data-v-39c7db2a="" class="text-center">Limit</td> <td data-v-39c7db2a="" class="text-center market">KIBA/USDT</td> <td data-v-39c7db2a="" class="text-left price price-down">
                                0.00003888
                            </td> <td data-v-39c7db2a="" class="amount leftAmount text-left"><span data-v-39c7db2a=""><!---->
                                    100
                                    KIBA
                                </span></td> <td data-v-39c7db2a="" class="text-left total">
                                0.00388800
                                
                                USDT
                            </td> <td data-v-39c7db2a="" class="text-right">
                                0.0000%
                            </td> <td data-v-39c7db2a="" class="text-right"><span data-v-39c7db2a="" class="cancel ordersO_title_cancelall">Cancel</span></td></tr>

我感兴趣的值是百分比，如本例中的 0.0000%。由于 class 名称相同，我如何循环才能获得所有名称？

Answer 1

这需要更多 javascript 才能工作。但是，一旦实施，它应该会更好地工作。首先将下面的javascript保存到'script.js'在你项目的根目录（或者一个子目录，如果你在代码中改变了路径）。 确保 select 文件的属性和 select Copy to output directory: Copy if newer。这会复制脚本文件，以便 WebView2 可以找到它。

这是javascript：

let GetOrders = function ()
{
    let doubles = [];
    let cells = document.querySelectorAll('div.ordersO.exchange-card.layout-r  td.text-right');
    let filteredArray = Array.from(cells).filter(function (value)
    {
        return value.textContent.includes('%') && value.nextElementSibling?.firstElementChild?.textContent.includes('Cancel');
    });
    filteredArray.forEach(function (value)
    {
        doubles.push(+/[\d.+-]+/.exec(value.textContent)[0]);
    });
    return doubles;
};

现在您已经有了 javascript，您可以在表单中实现代码。由于我不知道 Vb.net，我用 C# 显示代码（应该很容易翻译）。这是整个表单文件：

using Newtonsoft.Json;
using Microsoft.Web.WebView2.Core;

namespace WinFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private async void Form1_Load(object sender, EventArgs e)
        {
            await webView21.EnsureCoreWebView2Async();
            //webView21.CoreWebView2.Navigate(Path.Combine(Environment.CurrentDirectory, "html.html")); // Just my testing with your html
        }

        private async void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            string script = File.ReadAllText("script.js");
            await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);
        }

        private async void Button1_Click(object sender, EventArgs e)
        {
            string json = await webView21.ExecuteScriptAsync("GetOrders()");
            decimal[] orders = JsonConvert.DeserializeObject<decimal[]>(json) ?? Array.Empty<decimal>();

            if (orders.Length == 0)
            {
                MessageBox.Show("No orders");
            }
            else
            {
                MessageBox.Show(String.Join(',', orders));
            }
        }
    }
}

请注意，我使用 CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync - 在页面中注入代码，以便您稍后调用它。

因为 ExecuteScriptAsync returns JSON，我使用 JsonSerializer.Deserialize<decimal[]> 创建一个 decimal 值的数组。

如果没有订单（returns 一个空数组），此代码也有效。

编辑:

更改为使用 Newtonsoft.Json。

编辑2:

更改了 javascript 代码以避免重复！

如何解析具有相同 class 名称的 table 单元格中的值

How to parse values in a table cell with the same class name

.net

vb.net

parsing

visual-studio

webview2