Untitled

How do I make specific words turn different colours?

<div class="scroll">

          <p class="margin">This box should scroll when it runs out of space.This box should                    scroll when it      runs out of space.This box should scroll when it runs                   out of space.This box should scroll when it runs        out of                  space.This box should scroll when it runs out of space.This box should scroll                   when it runs out        of space.This box should scroll when it runs                    out of space.This box should scroll when it runs out of                 space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.

        </p>

    </div>

       

$text = str_replace("red", "<span class='red-class'>red<span>", "This is red");

       

var words_and_colors = [

    {'word':'this', 'color':'red'},

    {'word':'to', 'color':'blue'}

];

 

function hilte_words_in_element (element, words) {

    for (var z=0; z < words.length; z++) {

        var re = new RegExp('('+words[z]['word']+'\b)', 'gi')

        element.innerHTML =  element.innerHTML.replace(

            re,

            "<span style="color:"+words[z]['color']+"">$1</span>"

        );

    }

}

hilte_words_in_element(document.getElementById('changeMe'), words_and_colors);

       

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

       

(function($) {

  var thePage = $("body");

  thePage.html(thePage.html().replace(/This/ig,'<span id="This">This</span>'));

})(jQuery)