为什么将.filter（）与.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>

我需要做的是，我需要仅在output_area元素元素汇回它们的嵌套＆lt; pre＆gt; pre＆gt;元素包含一个单词 +一个数字（例如白色05，而不仅仅是黑色）。

因此，这就是我所做的：

我从所有output_area元素中制作了一个数组：

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

我将output_areas数组过滤到仅返回那些output> output_area elements elements nested＆lt; pre＆gt; pre＆gt;满足我的单词 +一个数字的状况，使用regexp，就像这样：

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

现在，发生的事情是，此函数只会返回第一个匹配结果，因此我将获得一个长度为1的对象，其中包含1 ：

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

和output_area元素包含＆lt; pre＆gt; 就可以看到“白色16”。

您在正则表达式的末尾看到的是，我将“ G”索请求全局搜索，而不仅仅是在第一个结果停止，

不明白为什么这不起作用，我试图验证如果我使用Include（）执行搜索会发生什么：（

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

让我们现在忘记数字，这并不重要）

，发生了什么？ 这也将仅返回第一个output_area ...

，但是为什么???我在做什么错？ 我并不是为了说过去几个小时我一直在为此敲打我而感到羞耻……而在这一点上，我只想了解什么是不起作用的。

我认为我得到的唯一线索是，如果我仅使用a ==或！=简化搜索，例如：

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

我恢复了所有output_area元素，而不仅仅是第一个元素！

因此，我怀疑使用过滤器（）＆amp; match（）或filter（）＆amp;包括（），但与我的Google搜索有关，我没有将我带到任何地方...

所以我希望您能提供帮助！

Answer 1

您应该使用在此处删除文本之前和之后的空间

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案例之一... :)

回答自己， ）卡住了...
可能没有我注意到的jupyter运行时间（正在为页面上服务）崩溃了，这在某种程度上导致了我正在寻找的那种不一致的情况。

故事的寓意：如果您看到与Python笔记本的互动中的怪异行为，请务必检查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)  
}  

输出应该是3 div符合条件。