Find string that starts with two digits and a letter

Question

I am doing a JavaScript code to hide elements on a website that does not start with a certain text.

There are a bunch of combinations that can be output in a <span> on the website. They all start with 2 digits and then a letter. For example:

76T
92Q
18H
71S

Sometimes the strings also contain text at the end of the line. But right now I am trying to find out which lines contains 2 digits (no matter which) and the letter "F" afterwards. Like 92F, 35F, 19F and so on.

I am trying to use the javascript .Match but I get no results. it says no such function exists.

My code:

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!');
    }
}

Basically I just want all the strings that begins with digits (0-9) and the letter F. there are NO spaces between them.

Output on website looks like this:

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

Edit:

Hide/remove the divs that does not contain this text.

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 returns an array-like collection of elements, and elements do not have a .match method. Check the textContent of each element instead, and consider using 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>

If you want a collection of elements which match the pattern, use .filter instead:

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>

Or, if you need all of the matching strings, use Array.from to map each element to its textContent first, before 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>

To find each parent of an element which does not match, check if .every one of the parent's myClasses do not matche:

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