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返回 elements 的类似数组的集合，并且元素没有.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将每个元素映射到其filter：

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中的一个myClass是否不匹配：

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

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

1 个答案: