搜尋

首頁  >  問答  >  主體

使用正規表示式來匹配id值

<p>我想要找到所有值為<code>id</code>屬性由以下組成的<code>g</code>節點的子節點:</p> <pre class="brush:php;toolbar:false;">a[number]-[一個或多個字元] // 例: // - id="a1-a" // - id="a1-b" // - id="a1-abcd" // - id="a10-f" // - id="a0-z" // - id="b1-a" // 不合法 // - id="a1-2" // 不合法</pre> <p>所以我試了:</p> <pre class="lang-js prettyprint-override"><code>const items = gElement.querySelectorAll(`[id^='a[0-9] -[a-zA-Z] ']`) </code></pre> <p>但是,它不起作用。 </p>
P粉757556355P粉757556355444 天前562

全部回覆(1)我來回復

  • P粉237647645

    P粉2376476452023-08-31 10:23:22

    在你的查詢選擇器中,你使用的模式 ([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>

    回覆
    0
  • 取消回覆