Czy o to Tobie chodziło? (css - przykładowy ).
Możesz np. tak: pobierasz zawartość h2 (textContent), do każdego tag-u (słowa) dodajesz span, to pozwala na "stylizowanie" z osobna.
Przykład
<div class="tag-category">
<h2>"Tag Tag Drugi Tag Trzydziesty Drugi"</h2>
</div>
.tag-category h2 span {
padding: 0.2em 0.3em;
margin: 0 0.15em;
font: 300 1em monospace;
font-variant: small-caps;
border-radius: 0.2em;
cursor: pointer;
}
.tag-category h2 span:nth-child(even) {
background-image: linear-gradient(transparent 10%, green);
}
.tag-category h2 span:nth-child(odd) {
background-image: linear-gradient(transparent 10%, yellow);
}
.tag-category h2 span:nth-child(1) {
background-color: orange;
}
.tag-category h2 span:nth-child(2) {
background-color: pink;
}
.tag-category h2 span:nth-child(5) {
background-color: black;
color: white;
}
const div_tags = document.querySelector('.tag-category h2');
const arr_tags = div_tags.textContent.replace(/['"]+/gi, '').split(' ');
let tags_html = '';
for (const tag of arr_tags)
tags_html += `<span>${tag}</span>`;
div_tags.innerHTML = tags_html;