為什么 using.filter() with.match() 只返回符合條件的第一個元素？

Question

我有一些 HTML 代碼，其中在最嵌套的級別有一些我感興趣的文本：

<div class="main">
  <div class="container">
    
    <div class="output_area">
      <pre>WHITE 34</pre>
    </div>
    <div class="output_area">
      <pre>RED 05</pre>
    </div>

    <div class="output_area">
      <pre>WHITE 16</pre>
    </div>
    <div class="output_area">
      <pre>BLACK</pre>
    </div>
  
  </div>
</div>

我需要做的是，僅當嵌套的 <PRE> 元素包含單詞 + 數字（例如 WHITE 05，而不僅僅是 BLACK）時，我才需要返回output_area元素。

所以這就是我所做的：

我從所有 output_area 元素創建了一個數組：

output_areas = Array.from(document.getElementsByClassName('output_area'));

我過濾了output_areas數組，只返回嵌套 <PRE> 滿足我的單詞 + 數字條件的那些output_area元素，使用正則表達式，如下所示：

output_areas.filter(el => el.textContent.match(/^WHITE \d+$/g));

現在，這個 function 將只返回第一個匹配結果，所以我將得到一個長度為 1 的 object，其中僅包含：

<div class="output_area">
      <pre>WHITE 34</pre>
</div>

並且不返回包含帶有“WHITE 16”的 <PRE> 的output_area元素。

如您所見，在正則表達式的末尾我放了一個“g”來請求全局搜索，而不是只在第一個結果處停止。

不明白為什么這不起作用，我試圖驗證如果我使用 includes() 執行搜索會發生什么：

output_areas.filter(el => el.textContent.includes('WHITE')

（讓我們現在忘記數字，這並不重要）

會發生什么？ 這也將只返回第一個output_area ...

但為什么？？？ 我究竟做錯了什么？ 我毫不羞愧地說，在過去的幾個小時里我一直在努力解決這個問題……在這一點上，我只想了解什么是行不通的。

我認為我得到的唯一線索是，如果我僅使用 == 或，=: 來簡化我的搜索，例如：

output_areas.filter(el => el.textContent != "")) // return all not empty elements 

我取回了所有 output_area 元素，而不僅僅是第一個！

所以我懷疑同時使用 filter() 和 match() 或 filter() 和 includes() 時一定存在某種問題，但與此相關，我的谷歌搜索並沒有帶我到任何有用的地方......

所以我希望你能幫忙！

Answer 1

您應該在此處使用trim來刪除文本前后的空格

output_areas.filter( el => el.textContent.trim().match( /^WHITE \d+$/g ))

 const output_areas = Array.from(document.getElementsByClassName('output_area')); const result = output_areas.filter(el => el.textContent.trim().match(/^WHITE \d+$/g)); console.log(result);

 <div class="main"> <div class="container"> <div class="output_area"> <pre> WHITE 34 </pre> </div> <div class="output_area"> <pre> RED 05 </pre> </div> <div class="output_area"> <pre> WHITE 16 </pre> </div> <div class="output_area"> <pre> BLACK </pre> </div> </div> </div>

Answer 2

出於某種原因回答我自己然后它開始工作而我這邊沒有任何改變......是的，只是我們都知道的那些典型的 IT 案例之一...... :)

撇開玩笑不談，我認為由於某種原因網頁（DOM）卡住了......可能是 Jupyter 運行時（為頁面提供服務）在我沒有注意到的情況下崩潰了，這不知何故導致了我正在看的那種不一致。

故事的寓意：如果您在與 Python Notebook 的交互中看到奇怪的行為，請始終 go 檢查 Jupyter 運行時狀態，然后再嘗試修復不可能的錯誤。

Answer 3

我不確定 Jupyter 筆記本的問題是什么，但一般來說 - 僅基於問題中的 HTML - 我相信你正在嘗試做的事情可以使用 xpath 而不是 css 選擇器來實現：

html = `[your html above]
`
domdoc = new DOMParser().parseFromString(html, "text/html")

const areas = domdoc.evaluate('//div[contains(./pre," ")]', domdoc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (let i = 0; i < areas.snapshotLength; i++) {
 console.log(areas.snapshotItem(i).outerHTML)  
}  

output應該是滿足條件的3個div 。