Как заменить обычный текст определенным значением тем же текстом, но теги <font>вокруг него JS или jQuery при загрузке страницы

Question

У меня есть следующая кнопка:

<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"><font color="red">SIZE 10</font></button>

Другие размеры выглядят одинаково, единственное, что отличаетсятекст между тегами кнопок: US 9, US 10 и т. д.

Мне необходимо заменить "SIZE 10" на "<font color="red">SIZE 10</font>" для целей автоматизации макросов на существующем веб-сайте. Я собираюсь иметь разные размеры и разные цвета.

Хотелось бы, чтобы я мог стилизовать его с помощью расширения стиля, но все теги кнопок не имеют никакого отношения к размеру.

Фрагмент javascript илиФрагмент jQuery был бы признателен, мне нужно будет найти, как заставить его загружаться на сайт при загрузке страницы, чтобы он менял цвет текста. Но эта часть проще.

Answer 1

Проще всего было бы добавить стиль CSS. Что-то вроде

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

Если кнопки, которые вы хотите стилизовать, не выбираются таким классом, как этот, вы можете использовать jQuery:

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

Вместо добавления тега шрифта, вы можетепросто добавьте класс к этим кнопкам и установите CSS для стиля с цветом: красный

В HTML5 вы должны избегать использования тегов FONT (и B, I, U). Вместо этого вы можете использовать SPAN и классы для стилизации ваших элементов

Answer 2

Как насчет чего-то подобного ниже?

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>