CODEWITHSUNDEEP
htmlcssstyling
EandCProducts
EandCProducts

Reputation: 71

How do I make specific words turn different colours?

I am wondering how to make different words turn different colours in my webpage. EG: "This" would turn red, but "box" would turn blue.

So far I have this:

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

Edit:

Um, sorry. I don't really understand what any of you are saying, or how to use them.

Upvotes: 1

Views: 788

Answers (4)

Jalal
Jalal

Reputation: 6836

Yes, I know question hasn't any javascript or jquery tag, but this could be a suggest :)

append this to @Nic Meiring answer:

add following line into your <header></header> section of page: 

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

then add another <script></script> section for calling following javascript in your pages <header></header> section:

(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/This/ig,'<span id="This">This</span>'));
})(jQuery)

Fiddle link

Use jQuery to Replace a Word

Upvotes: -1

Chris Baker
Chris Baker

Reputation: 50592

Dirty-but-working solution with innerHTML:

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);

Fiddle with it: http://jsfiddle.net/8vDgH/

Note that this is considered "bad" -- one should not deal with innerHTML if it can be avoided. Not knowing the circumstances that you're using it in, I can't make a more specific interaction with DOM; you DO know what you're using it for, so I suggest you refactor the code to use a more acceptable means of altering node content.

Also note that if this can be accomplished on the server-side, it would be much more efficient. You would use a similar concept, but do so before the content has been output. I do not know if this is viable for your use-case, but if so, there is no question it would be the route with best performance (and you can avoid the dreaded and evil innerHTML)

Upvotes: 0

Naveed
Naveed

Reputation: 42093

Nic Meiring answered a valid solution but it is difficult to change color in long paragraphs by finding specific words and applying css on them. It is OK in case of short texts but for long paragraphs and variable texts, you need to apply a general solution.

CSS solution: (Not sure about all browsers)

If you are allowed to use jQuery:

or You can use string replacing methods in a server side language. For Example str_replace in PHP:

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

Upvotes: 2

Nic Meiring
Nic Meiring

Reputation: 882

you could create span around the words you want to change the color of.

I created a demo for you at http://jsfiddle.net/LwR8D/

Upvotes: 1

Related Questions