查找以两位数字和一个字母开头的字符串

Question

我正在编写一个 JavaScript 代码来隐藏网站上不以特定文本开头的元素。

网站上有很多组合可以输出<span>。它们都以 2 个数字开头，然后是一个字母。例如：

76T
92Q
18H
71S

有时字符串在行尾也包含文本。 但现在我试图找出哪些行包含 2 个数字（不管是哪个），然后是字母“F”。比如92F、35F、19F等等。

我正在尝试使用 javascript .Match 但我没有得到任何结果。它说不存在这样的功能。

我的代码：

var descriptions = document.getElementsByClassName('myClass');
var reg = new RegExp("^([0-9])F(.*)");

for (var i=0; i<descriptions.length; i++) {
    if (descriptions[i].match(reg)) {
        console.log('it exists!');
    }
}

基本上我只想要所有以数字 (0-9) 和字母 F 开头的字符串。它们之间没有空格。

网站上的输出如下所示：

<span class="myClass">36P Wooden</span>

编辑：

隐藏/删除不包含此文本的 div。

var descriptions = document.getElementsByClassName('myClass');
var reg = /^\d{2}F/;

for (var i=0; i<descriptions.length; i++) {
    if (!descriptions[i].textContent.match(reg)) {
        descriptions[i].closest('myClass2').style.display = 'none';
    }
}

Answer 1

getElementsByClassName 返回一个类似数组的元素 集合，元素没有.match 方法。检查每个元素的textContent，并考虑使用regex literals instead of new RegExp：

var descriptions = document.getElementsByClassName('myClass');
var reg = /^\d{2}F/;

for (var i=0; i<descriptions.length; i++) {
    if (descriptions[i].textContent.match(reg)) {
        console.log('it exists!');
    }
}

var descriptions = document.getElementsByClassName('myClass');
var reg = /^\d{2}F/;

for (var i=0; i<descriptions.length; i++) {
    if (descriptions[i].textContent.match(reg)) {
        console.log('it exists!', descriptions[i]);
    }
}

<span class="myClass">36P Wooden</span>
<span class="myClass">11F something</span>

如果您想要一个与模式匹配的元素集合，请改用.filter：

var descriptions = document.getElementsByClassName('myClass');
var reg = /^\d{2}F/;

const matchingElements = [...document.querySelectorAll('.myClass')]
  .filter(elm => elm.textContent.match(reg));
console.log(matchingElements);

<span class="myClass">36P Wooden</span>
<span class="myClass">11F something</span>
<span class="myClass">22F something else</span>

或者，如果您需要所有匹配的字符串，请先使用Array.from 将每个元素映射到其textContent，然后再使用filtering：

var descriptions = document.getElementsByClassName('myClass');
var reg = /^\d{2}F/;

const matchingStrings = Array.from(
  document.querySelectorAll('.myClass'),
  elm => elm.textContent
)
  .filter(textContent => textContent.match(reg));
console.log(matchingStrings);

<span class="myClass">36P Wooden</span>
<span class="myClass">11F something</span>
<span class="myClass">22F something else</span>

要查找不匹配元素的每个父元素，请检查父元素的.every 之一是否不匹配：

const parentsWithNoMatches = [...document.querySelectorAll('.myClass2')]
  .filter(parent =>
    [...parent.querySelectorAll('.myClass')]
      .every(child => !child.textContent.match(reg))
  );