Select every word and give it another color

Question

How can I select every word in a page, reverse it and give it another color?

What I tried for now:

jQuery('*').each(function(){
    var text = jQuery(this).text().split(' '),
        len = text.length,
        result = []; 

    for( var i = 0; i < len; i++ ) {
        result[i] = '<span style="color: green;">' + text[i].split("").reverse().join("") + '</span>';
    }
    jQuery(this).html(result.join(' '));
});

But I am pretty far from what I need. Any clues?

is not a problem. as crazy as it sounds, it just busted into my thoughts how could I achieve this. to much free time :) — Dan Ovidiu Boncut, Apr 09 '15 at 10:29
you need to make recursive calls actually, try to find the most inner element first and then bubble outside and check for each siblings at same time, it is not easy as it looks — A.T., Apr 09 '15 at 10:34
i just copied the code to this [fiddle](http://jsfiddle.net/8uL6kz5b/) and it seems to work so what the problem? if its about a random color i added a line in this [fiddle](http://jsfiddle.net/ka40t7e0/), probably want to change the `*`selector to something else — grabthefish, Apr 09 '15 at 10:36

score 1 · Answer 1 · answered Apr 09 '15 at 10:38

You are trying to replace the entire contents of the elements, it has a problem when you try to replace the root nodes

//the main point here is you need to replace only the contents of the text node, not all the html parts
jQuery('*').contents().each(function () {
    //not a text node or there is no content to replace
    if (this.nodeType != 3 || !this.nodeValue.trim()) {
        return;
    }

    //replace the value of the text node
    $(this).replaceWith(this.nodeValue.replace(/\w+/g, function (part) {
        return '<span style="color: green;">' + part.split("").reverse().join("") + '</span>'
    }))
});

Demo: Fiddle

score 1 · Answer 2 · edited May 23 '17 at 12:14

This splits up the text into words (based on space, but you could use a regular expression, if you want something more complicated), then reverses the word, assigns each of them a colour and writes that to the result div.

var main = document.getElementById('main');
var result = document.getElementById('result');

var text = main.textContent;

var words = text.split(' ');

var colours = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

for(var wi = 0; wi < words.length; wi++)
  {
    if(words[wi] !== '')
      {
        var c = colours[Math.floor(Math.random() * colours.length)];
        result.innerHTML += '<span class="'+c+'">'+words[wi].split("").reverse().join("")+'</span> ';
      }
  }

span.red
{
  color:#ff0000;
}

span.green
{
  color:#00ff00;
}

span.blue
{
  color:#0000ff;
}

span.cyan
{
  color:#00ffff;
}

span.magenta
{
  color:#ff00ff;
}

span.yellow
{
  color:#ffff00;
}

span.black
{
  color:#000000;
}

<div id="main">
  There is a bunch of words here. Maybe we can split them up and change their colours.
</div>
<div id="result">
</div>

Maybe I wasn't very clear, but I want to keep the words in the same place as they were, and keep DOM structure. So my page should look the same but the words are with different color — Dan Ovidiu Boncut, Apr 09 '15 at 11:43

Select every word and give it another color

2 Answers2