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 e 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 (/) 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>

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 e 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/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>

• javascript
• php
• jquery
• css
• colors

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Sep 24, 2015 at 13:44 reviverevive 86333 gold badges1616 silver badges3131 bronze badges 2

• if you know jquery you can do some dom tweaking by using it – Dhiraj Wakchaure Commented Sep 24, 2015 at 13:48
• For anyone else that would like to see how this solution played out.. I've created a JSFIDDLE here: jsfiddle/revive/xyy04u7d which adds to what Tushar provided and negates the & from the regex (I needed that on the same line as the word before it). – revive Commented Sep 24, 2015 at 15:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./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./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h1> Hello World! Have a Great Day! </h1>

Here is a demo that splits the words based on spaces, wraps each word in a span with a class name. You can style the elements however you like using the class name.

var str = "Here Is My New Title which may well be way too longer than I have actually provided";
var res = "";

str.split(/\s+/).forEach(function(str, idx) {
  //Would only work with the string in question
  //res += "<span class='color-"+(idx+1)+"'>" + str + " </span>";
  //Would work with any amount of words in a string, applying the same set of classes every 5 words.
  res += "<span class='color-" + (idx % 5) + "'>" + str + " </span>";
});

$("body").append(res);

.color-0 {
  color: violet;
}
.color-1 {
  color: indigo;
}
.color-2 {
  color: blue;
}
.color-3 {
  color: green;
}
.color-4 {
  color: red;
}

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

here is similar answer

change perticular text

first = str.substring(0,till);
    second = str.substring(till,last);
    //Print data
    $(this).html("<span style=color:"+setting.color+">"+first+"</span>"+ second);

Download Plugin : string_color