使用正则表达式匹配id值

Question

我想找到所有值为id属性由以下组成的g节点的子节点：

a[number]-[一个或多个字符]

// 例子：
//  - id="a1-a"
//  - id="a1-b"
//  - id="a1-abcd"
//  - id="a10-f"
//  - id="a0-z"
//  - id="b1-a" // 不合法
//  - id="a1-2" // 不合法

所以我尝试了：

<code>const items = gElement.querySelectorAll(`[id^='a[0-9]+-[a-zA-Z]+']`)
</code>

但是，它不起作用。

Answer 1

在你的查询选择器中，你使用的模式 ([0-9]+) 没有被解释为正则表达式。使用 RegExp 构造函数从字符串创建一个正则表达式对象：

const regex = new RegExp('^a[0-9]+-[a-zA-Z]+$');
const parentElement = document.querySelector('#parent-element');
const items = parentElement.querySelectorAll(`[id]`);
const children = Array.from(items).filter(item => regex.test(item.id));

console.log(children); 

<div id="parent-element">
  <p id="a1-a">Child 1</p>
  <p id="a1-b">Child 2</p>
  <p id="INVALID-1">Child 3</p>
  <p id="a10-f">Child 4</p>
  <p id="INVALID-2">Child 5</p>
  <p id="b1-a">Child 6</p>
  <p id="a1-2">Child 7</p>
</div>