...
CSS, Javascript, Tutorials

Make Every First Letter Of Word In Different Color

26 May 2018

Here we will see how to make every first letter of the word in different color to rest text.

HTML

This is demo text to show each word'd firsh charachter in Red color.

CSS

.first-letter {
    color: red;
  }

Javascript

window.onload = function(){
  var elements = document.getElementsByClassName("each-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}

Result

Leave a Comments