JS中filter()搭配match()/includes()为何仅返回首个匹配元素？

• 正则使用错误：你在单条字符串格式校验场景下给正则加g全局修饰符完全多余。带g标志的正则实例会保留上一次匹配结束的lastIndex位置，如果正则被复用（比如定义在filter方法外部），下一次匹配会从记录的位置开始检索，直接导致匹配逻辑错乱。即使你把正则写在回调函数内每次生成新实例，加g也没有任何正向作用，反而可能触发意外问题。
• 文本读取逻辑不严谨：你直接读取output_area的textContent会把标签之间的换行、缩进空白字符一并计入，比如示例中第一个output_area的实际文本内容是\n WHITE 34\n ，前后带空白的情况下，你写的/^WHITE \d+$/要求字符串从头到尾完全匹配，自然无法命中符合规则的其他项。同时你没有精准定位到嵌套的<pre>标签读取内容，后续如果output_area内新增其他节点会直接干扰匹配结果。
• includes()只返回第一个结果属于代码书写问题：你贴出的includes示例代码缺少一个闭合括号，存在语法错误；如果实际运行时也有类似笔误，比如误将返回首个匹配项的find()写成filter()，或是实际页面DOM存在标签未闭合、结构和你给出的示例不一致导致元素嵌套异常，都会出现不符合预期的返回结果。

不要使用多余的g修饰符，精准定位

标签读取文本，先去除前后空白再做格式校验，优先用test()做布尔判断，性能比match()更好：
// 用querySelectorAll获取静态节点列表，转数组，避免动态HTMLCollection的异常问题
const outputAreas = Array.from(document.querySelectorAll('.output_area'));

// 筛选符合「单词+空格+数字」格式的元素
const validResult = outputAreas.filter(el => {
  const preNode = el.querySelector('pre');
  if (!preNode) return false;
  // 去除文本前后的换行、空格、缩进再校验
  const text = preNode.textContent.trim();
  // 不需要加g标志，正则匹配：字母开头 + 空格 + 数字结尾
  return /^[A-Za-z]+ \d+$/.test(text);
});
如果只需要匹配WHITE开头的内容，把正则替换为/^WHITE \d+$/即可。
内容的提问来源于stack exchange，提问作者red-o-alf