Как изменить цвет указанных c символов [jQuery / RegEx]

Question

Хотите изменить цвет указанных c символов. Возникают проблемы при достижении этого, возвращаемые значения перезаписываются новыми значениями. Попытка поместить это в al oop для анализа символов, но затем потерялась в потоке.

1. HTML содержит необработанный текст.
2. Цвета определены в CSS.
3. RegEx содержат указанные c символы для замены (например, заглавные буквы A и / или строчные буквы a) при первом запуске.
4. jQuery содержит функцию для измените спецификацию c символов.

Вот пример:

$(document).ready(function() {
  $("#container p").html(function(_, html) {
    return html.replace(/([Aa])/g, '<span class="red">$1</span>');
  });
  $("#container p").html(function(_, html) {
    return html.replace(/([Ee])/g, '<span class="blue">$1</span>');
  });
  $("#container p").html(function(_, html) {
    return html.replace(/([Rr])/g, '<span class="green">$1</span>');
  });
  $("#container p").html(function(_, html) {
    return html.replace(/([Oo])/g, '<span class="yellow">$1</span>');
  });
});

.red {
  color: red
}

.blue {
  color: blue
}

.green {
  color: green
}

.yellow {
  color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <p>aero aero aero</p>
</div>

jQuery возвращает зашифрованный HTML.

Answer 1

Чтобы предотвратить перезапись уже записанных значений, я создал новую строку для хранения значений и, наконец, заменил старую строку.

$(document).ready(function() {
  var newString = '';
  for(var i = 0; i < $("#container p").html().length; i++) {
  	switch($("#container p").html()[i].toLowerCase()) {
    	case 'a':
      	newString += '<span class="red">' + $("#container p").html()[i] + '</span>';
      	break;
      case 'e':
      	newString += '<span class="blue">' + $("#container p").html()[i] + '</span>';
        break;
      case 'r':
      	newString += '<span class="green">' + $("#container p").html()[i] + '</span>';
        break;
      case 'o':
      	newString += '<span class="yellow">' + $("#container p").html()[i] + '</span>';
        break;
      default:
      	newString += $("#container p").html()[i];
    }
  }
  $("#container p").html(newString);
});

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <p>aero aero aero</p>
</div>