为什么 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 。