CODEWITHSUNDEEP
javascriptphphtmljquerycss
Yesyeahvh
Yesyeahvh

Reputation: 13

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:

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

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

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?

Upvotes: 1

Views: 199

Answers (2)

Michael M.
Michael M.

Reputation: 11070

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>

Upvotes: 0

Tomer Aberbach
Tomer Aberbach

Reputation: 646

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.

Upvotes: 2

Related Questions