从网页中获取格式为“_ (10 RANDOM CHARACTERS)”的所有元素 javascript

Question

我的网页有一个 table，里面有 table 行，格式如下

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

我正在尝试扫描网页并获取所有符合以下格式的 table 行：

id="_(10 RANDOM CHARACTERS)"

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

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

代码和我所做的：

我尝试了以下方法：

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

虽然这不是很稳健，但如果某些东西碰巧以“_”开头，它会被接受，我也可能会添加一个 IF 语句，它只在它的 11 个字符长时才接受它。

Answer 1

只使用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'));
}

Html 测试：

  <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>

Answer 2

Sebastian 的回答是好的，但缺乏对发生的事情的解释。

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

所以你可以使用：

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

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

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

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

你也可以这样做：

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

PS 我不喜欢这样 "dot chaining" 但是作为一个例子，它简洁明了。

请注意，如果 "v_viewable_items" 是 table 或 tbody，那么您还可以这样做：

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

或者像上面那样使用 forEach 而不是 filter。

从网页中获取格式为“_ (10 RANDOM CHARACTERS)”的所有元素 javascript

Get all elements in the format "_ (10 RANDOM CHARACTERS) " from a webpage javascript

html

javascript

arrays

object

jquery-selectors

代码和我所做的：