如何解析具有相同类名的表格单元格中的值

Question

我正在尝试通过控件 WebView2 获取具有相同类名的表格单元格中的值

This Answer

获取单个值很有用，但现在我想考虑一下可能碰巧有多个值。 表格完整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>

而表中每一行的代码为：

<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%。 由于类名相同，如何循环才能获取所有类名？

Answer 1

这需要更多的 javascript 才能工作。但是，一旦实施，它应该会更好地工作。 首先将以下 javascript 保存到项目根目录（或子目录，如果您更改代码中的路径）中的“script.js”。 确保选择文件的属性并选择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 返回JSON，我使用JsonSerializer.Deserialize<decimal[]> 创建一个decimal 值数组。

如果没有订单，此代码也将起作用（返回一个空数组）。

编辑：

改为使用Newtonsoft.Json。

编辑2：

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