How to add style to the matching string of text?-CodePudding

I have got the list of elements like this:

<p style="text-align: center;">
<b>List textlink</b>
<a  href="#abc.com/abc" target="_blank" rel="noopener">ANONFILE</a> - 
<a  href="#abc.com/xyz" target="_blank" rel="noopener">GOFILE</a> - 
<a  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?

CodePudding user response：

Looping through as you suggested would work, but if you're able to add each link's text to a data-* attribute in your HTML in advance like so:

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

Then you could simply target the links in CSS using attribute selectors:

.link[data-text="ANONFILE"] {
  font-size: 9px;
  color: red;
  letter-spacing: 0.5px;
}

.link[data-text="GOFILE"] {
  font-size: 10px;
  color: yellow;
  letter-spacing: 0.6px;
}

.link[data-text="ANONFILE"] {
  font-size: 11px;
  color: green;
  letter-spacing: 0.7px;
}

Which seems a bit simpler, and might be more performant. Note that the data-* attribute is needed because CSS does not provide a way to target elements based on their text content.

CodePudding user response：

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

.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;
}

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