How to add style to the matching string of text?

Question

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?

score 1 · Answer 1 · answered Dec 21 '22 at 03:09

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" class="link link--external has-favicon" href="#abc.com/abc" target="_blank" rel="noopener">ANONFILE</a> - 
<a data-text="GOFILE" class="link link--external has-favicon" href="#abc.com/xyz" target="_blank" rel="noopener">GOFILE</a> - 
<a data-text="MEGA" class="link link--external has-favicon" 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.

good idea but the problem is there are hundreds of posts like this so i can't edit it in html — Yesyeahvh, Dec 21 '22 at 04:45
@Yesyeahvh it is possible to make use of the href attribute and `*=` at the selector for a [`contains`](https://drafts.csswg.org/selectors/#overview) search. For example: `.link[href*="drive.google.com"] { }` -- With this you don't have to modify the classes of the elements, which might be a problem with the accepted answer. When a new element is added dynamically, they won't have the CSS classes applied and you have to execute the JS part again. — Christopher, Jan 02 '23 at 07:20

Michael M. · Accepted Answer · 2022-12-22T03:26:09.720

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>

can you tell me how to style if text link have 2 word like GOOGLE DRIVE? — Yesyeahvh, Dec 22 '22 at 03:24
@Yesyeahvh I've updated my answer to address that. Just add a class name without the space, then have the JS remove the from before it adds the class name. See my edit. — Michael M., Dec 22 '22 at 03:26

How to add style to the matching string of text?

2 Answers2