How to replace plain text with a specific value with the same text but tags around it with JS or jQuery on page load

Question

I have the following button:

<button class="sz-grid-dropdown sz-grid-button" data-qa="sz-dropdown">SIZE 10</button>

I need to replace it on page load with:

<button class="sz-grid-dropdown sz-grid-button" data-qa="sz-dropdown"><font color="red">SIZE 10</font></button>

The other sizes look the same, the only thing that's different is the text between the button tags: US 9, US 10, etc.

I essentially need to replace "SIZE 10" with "<font color="red">SIZE 10</font>" for Macro automation purposes on an existing website. I'm going to have different sizes be different colors.

I wish I could style it with a styling extension but all the button tags have nothing relating to the size.

A javascript snippet or jQuery snippet would be appreciated, I'll then have to find how to make it load onto the site on page load so it changes the text color. But that part is easier.

What have you tried yourself, and why has it failed? Also, do you want to make this replacement only in this one button element, or on any text node containing the string "SIZE 10"? — Constantin Groß, Oct 01 '19 at 13:50
Possible duplicate of [How can I a replace certain word for an image](https://stackoverflow.com/questions/58179640/how-can-i-a-replace-certain-word-for-an-image) or https://stackoverflow.com/a/7720056/2181514 — freedomn-m, Oct 01 '19 at 13:54
Using `font` is not supported by HTML5. I highly suggest using a `span` tag with a class and some CSS. [source](https://www.w3schools.com/tags/tag_font.asp) — Nicolas, Oct 01 '19 at 13:56
"*how to make it load on load*" - https://learn.jquery.com/using-jquery-core/document-ready/ - `$(function() { .. runs on load .. });` — freedomn-m, Oct 01 '19 at 13:57
Your scenario is possibly easier than the above possible duplicate (based on your response to the first comment above... still waiting): `$("button:contains('SIZE 10')").addClass("color-red");` then define `.color-red { color: red; }` in your css. https://jsfiddle.net/b84zp5v7/ — freedomn-m, Oct 01 '19 at 13:59

score 1 · Accepted Answer · answered Oct 01 '19 at 13:55

The easiest would be to add a css style. Something like

button.sz-grid-dropdown.sz-grid-button {
  color: red;
}

If the buttons you want to style aren't selectable by class like this, you can use jQuery:

var buttons = $("button").filter(function() {
  return (this.innerText === "SIZE 10");
});

Rather than adding the font tag, you could just add a class to these buttons, and set the css to style with color:red

In HTML5 you should avoid using FONT (and B, I, U) tags. You can use SPAN instead and classes to style your elements

BritishSam · Answer 2 · 2019-10-02T08:47:59.770

How about something like below?

var colors = ["red", "blue", "green"]
var i = 0;

$('button').each(function(){
  if($(this).is(':contains("SIZE ")')){
      $(this).css('color', colors[i]);
      i++
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="sz-grid-dropdown sz-grid-button" data-qa="sz-dropdown">
  SIZE 10
 </button>
 <button class="sz-grid-dropdown sz-grid-button" data-qa="sz-dropdown">
  SIZE 9
 </button>
 <button class="sz-grid-dropdown sz-grid-button" data-qa="sz-dropdown">
  SIZE 8
 </button>

How to replace plain text with a specific value with the same text but tags around it with JS or jQuery on page load

2 Answers2