How to add style to the matching string of text?

I have got the list of elements like this:

<p style="text-align: center;">
<b>List textlink</b>
<a class="link link--external has-favicon" href="#abc.com/abc" target="_blank" rel="noopener">ANONFILE</a> - 
<a class="link link--external has-favicon" href="#abc.com/xyz" target="_blank" rel="noopener">GOFILE</a> - 
<a class="link link--external has-favicon" href="#abc.com/123" target="_blank" rel="noopener">MEGA</a>
</p>

Textlink is: ANONFILE, GOFILE, MEGA

With Javascript/JQuery/CSS, Is there anyway I can check textlink and could simply only change the element’s CSS if the inner Textlink equals:

• IF textlink equal “ANONFILE” style css

font-size: 9px;
    color: red;
    letter-spacing: 0.5px;

• IF textlink equal “GOFILE” style css

font-size: 10px;
    color: yellow;
    letter-spacing: 0.6px;

• IF textlink equal “MEGA” style css

font-size: 11px;
    color: green;
    letter-spacing: 0.7px;

The only way I know to do this is to get all of the links and loop through them checking to see if the textlink contains the string I am searching for.

Is there a better way to do this without change original code?

Answer

You could write the classes in CSS, then add the .textContents as a class, like this:

for (el of document.querySelectorAll('.link')) {
  el.classList.add(el.textContent.replaceAll(' ', ''));
}

.ANONFILE {
  font-size: 9px;
  color: red;
  letter-spacing: 0.5px;
}

.GOFILE {
  font-size: 10px;
  color: yellow;
  letter-spacing: 0.6px;
}

.MEGA {
  font-size: 11px;
  color: green;
  letter-spacing: 0.7px;
}

.GOOGLEDRIVE {
  font-size: 15px;
  color: blue;
  letter-spacing: 1.1px;
}

<p style="text-align: center;">
  <b>List textlink</b>
  <a class="link link--external has-favicon" href="#abc.com/abc" target="_blank" rel="noopener">ANONFILE</a> -
  <a class="link link--external has-favicon" href="#abc.com/xyz" target="_blank" rel="noopener">GOFILE</a> -
  <a class="link link--external has-favicon" href="#abc.com/123" target="_blank" rel="noopener">MEGA</a>
  <a class="link link--external has-favicon" href="#abc.com/123" target="_blank" rel="noopener">GOOGLE DRIVE</a>
</p>