更改字符串中每个单词的字体颜色（JS或PHP）

Question

I've searched but cannot find a solution to increment the font color (eg. lightness +10%) for each of 3 or 4 words in a title. The font color will be initially set in SCSS with a color var.

Example Title:

Here Is My New Title

In this example, lets say the title was 'dark blue'.. the words would be:

Here = darker blue
Is = navy blue
My = medium blue
New Title = light blue

There is a similar post here: JavaScript Text Color Change To Each Word In Array but this is searching for keywords in an array, not each word of a string.

I've also come across basic CSS/HTML only solutions like this, which won't work: HTML: Changing colors of specific words in a string of text

NOTE: I will be returning the title (string) in a php variable - in case there is a solution in PHP.

GOAL: I need to increment the font color (or even wrap consecutive words in spans and increment the SCSS var) for each word in a string.. open to suggestions.

UPDATE I've added a jsfiddle link (http://jsfiddle.net/revive/xyy04u7d/) to show the JS implementation, thanks to Tushar, with some changes to include ampersands in the regex.

Here is the PHP implementation:

<?php
    $title = "SIMPLE TITLE & WITHOUT COLORS";
    $words   = preg_split('/\s+(?!&)/', $title);
?> 
<h3 class="colors blue">
<?php foreach($words as $word):?>
    <span><?php echo $word; ?></span>
<?php endforeach; ?>
</h3>

Answer 1

You can wrap the each word in separate span or any other element and then can be styled differently using the CSS nth-child property.

Using this approach, you don't have to create separate classes, and it'll work for any number of words in string.

var str = 'Split the Text by one or more spaces. Join them to make them wrap in span elements. Then use CSS nthChild Properties :)';

str = '<span>' + str.split(/\s+/).join('</span> <span>') + '</span>';

$(document.body).append(str);

span:nth-child(4n) {
  color: red;
}
span:nth-child(4n + 1) {
  color: green;
}
span:nth-child(4n + 2) {
  color: blue;
}
span:nth-child(4n + 3) {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

---

You can also use regex as follow:

$("h1").html(function(i, oldHtml) {
  return oldHtml.replace(/(\S+)/g, '<span>$1</span>');
});

span:nth-child(4n) {
  color: red;
}
span:nth-child(4n + 1) {
  color: green;
}
span:nth-child(4n + 2) {
  color: blue;
}
span:nth-child(4n + 3) {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h1> Hello World! Have a Great Day! </h1>

</div>