How to make diffrent words, a diffrent color

Question

Example:
Soap- yellow (this is yellow only)
Guitar-brown(this brown only)

Answer 1

A simple js solution

<p><span>soap</span>
<span>guitar</span></p>
<script>
var a=document.querySelectorAll("span");
colors=["yellow","brown"];
for(i in a){
if(i<a.length){ a[i].style.color=colors[i];
}}

In case of css
just give each span a different id and select it with that id and provide it color attribute

Answer 2

You could parse your document with JS and replace each occurrence with a spanned version with the designated formatting. This would be a pure JS-only way. If you're using a framework, the possible solutions may vary.

Answer 3

With precondition that each color is already given within a span? And a little more effort to apply on full text search 🙃

Answer 4

Make diferent class for different color and use any inlini element to implement that class to that word like :-
In css :
.yellow
{
color: yellow;
}
.brown
{
color:brown
}

In html :-

Hi, <span class = "yellow"> Abhay </span > is <span class = "brown">cool</span>