Найти строку, которая начинается с двух цифр и буквы

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>

Edit:

Скрыть / удалить элементы 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 вместо 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 ing:

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))
  );