从网页 JavaScript 中获取格式"_ (10 RANDOM CHARACTERS) "的所有元素

Question

>我有一个网页，里面有一个表格，里面有表格行，格式如下

<tr id="_C15DKNWCSV">text</tr>

我正在尝试扫描网页并获取遵循该格式的所有表格行：

id="_(10 RANDOM CHARACTERS)"

并将它们放在一个数组中，

我知道这与querySelectorAll有关，但我无法让随机字符过滤器工作。

代码和我所做的：

我已经尝试了类似以下内容的方法：

var current_queue_items = document.getElementById("v_viewable_items").querySelectorAll("[id^='_']")

虽然这工作它不是很健壮，但如果发生以"_"开头的事情，它将被接受，我也可能添加一个 IF 语句，该语句仅在其 11 个字符长时才接受它。

Answer 1

塞巴斯蒂安的回答是可以的，但它缺乏对正在发生的事情的解释。

属性选择器提供了一些用于匹配属性值的选项，但它们并不像正则表达式那样全面。在这种情况下，您能做的最好的事情可能是尽可能限制初始选择，然后过滤掉您想要的内容。

因此，您可以使用：

• 仅获取 TR 元素的 TR 选择器
• ID 的属性选择器
• "^"以选择器开头，以获取ID以下划线开头的用户

然后，您可以使用正则表达式过滤掉您不想要的那些，例如

var current_queue_items = [...document.getElementById("v_viewable_items")
.querySelectorAll("TR[id^='_']")]
.filter(node => /^_.{10}$/.test(node.id));

这将返回"v_viewable_items"表或 tbody 或任何具有符合正则表达式/^_.{10}$/的 ID 的 TR 元素数组。

您还可以执行以下操作：

document.getElementById("v_viewable_items")
.querySelectorAll("TR[id^='_']")
.forEach(node => {
if (/^_.{10}$/.test(node.id)) {
// do stuff with node
}
});

PS 我不喜欢这样的"点链接"，但它简洁明了，可以举例说明。

请注意，如果"v_viewable_items"是表格或正文，那么您也可以执行以下操作：

let current_queue_items = [...document.getElementById("v_viewable_items").rows]
.filter(row => /^_.{10}$/.test(row.id));

或者代替过滤器使用上述每个。

Answer 2

仅使用querySelectorAll 是不可能的，因此一个可能的解决方案是使用 querySelectorAll 获取所有以"_"开头的元素，然后使用正则表达式进行过滤。

在这里，我做一个例子，将文本附加到所有选定的TR

脚本：

var customSelect = function() {
var startWith_= [...document.querySelectorAll('tr[id^=_]')];
var selected = startWith_.filter(e => /_.{10}$/.test(e.id));
// Do what you want here. . .
selected.forEach( e => e.append('TR selected'));
}

网页测试：

<button onclick='customSelect()' >Custom Select</button>
<br />
<table>
<tr id="_ABCEF56789">
<td>It's ok</td>
</tr>
<tr id="_0123456789">
<td>It's ok</td>
</tr>
<tr id="_01234567890">
<td>It has more</td>
</tr>
<tr id="_ABCEFghijk">
<td>It's ok</td>
</tr>
<tr id="_012345678">
<td>It has less</td>
</tr>
<tr id="A0123456789">
<td>It start with no _</td>
</tr>
<table>