Apply CSS Repeatedly to Specific Words

Question

I'm trying to apply CSS repeatedly and automatically to specific words.

For example, for the word "Twitter" I want the colour of the text to be #00ACED.

At present I am manually applying these colours around specific brand terms using span classes:

<span class="twitter">Twitter</span>

With the CSS:

.twitter {
    color: #00ACED;
}

However, this is a process and I would prefer a method which completes this styling automatically. I have about 20 brand words with an associated colour styling.

Can anyone assist me with this problem. I am using WordPress if that makes any difference.

Answer 1

For those of you interested in the answer, I've created a solution using WordPress functionality:

function replace_custom_word($text){
    $replace = array(
    'Twitter' => '<span class="twitter"><a title="Twitter" target="_blank" href="http://www.twitter.com/">Twitter</a></span>',
    'Facebook' => '<span class="facebook"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></span>'
    );

$text = str_replace(array_keys($replace), $replace, $text);
return $text;}

Answer 2

Something like this may work. You would have to loop through your search terms and this might not be the most effective way to do it.

function add_class (search, replacement) {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
         var text = all[i].textContent || all[i].innerText;
         if (text.indexOf(search) !== -1 && ! all[i].hasChildNodes()) {
            all[i].className = all[i].className + " " + replacement;
         }
    }
}

var replacements = [
    ["Twitter","twitter"],
    //
]

for (var i = replacements.length - 1; i >= 0; i--) {
    add_class(replacements[i][0],replacements[i][1]);
};

Note: I didn't test this at all.

Answer 3

If you know minimum among of JavaScript, this JavaScript library can make your life much easier. it will convert all the letter in the string into a span tag. http://daverupert.com/2010/09/lettering-js/

Answer 4

I think the most straight-forward way to do it is by using a smart jQuery highlight plugin I came across. After applying it, you'll be able to do what you're after. Below is an example, with a link to a live fiddle at the end:

HTML

<p>Some examples of how to highlight words with the jQuery Highlight plugin. First an example to demonstrate the default behavior and then others to demonstrate how to highlight the words Facebook and Twitter with their own class names. Words will be highlighted anywhere in the DOM, one needs only to be specific on where the script should look for the words. It supports case-sensitivity and other options, like in the case of YouTube.</p>

CSS

p { line-height: 30px; }
span { padding: 4px; }
.highlight { background-color: yellow; }
.facebook { background-color: #3c528f; color: white; }
.twitter { background-color: #1e9ae9; color: white; }
.youtube { background-color: #be0017; color: white; }

Highlight Plugin (needs to be loaded after jQuery and before the JavaScript below)

<script type="text/javascript" src="http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js"></script>

JS

// default
$("body p").highlight("default");
// specify class name (not case sensitive)
$("body p").highlight("twitter", { className: 'twitter' });
$("body p").highlight("facebook", { className: 'facebook' });
// specify class name (case sensitive)
$("body p").highlight("YouTube", { className: 'youtube', caseSensitive: true });

Include this JavaScript at the bottom of the page (before the body closing tag so that you don't need to use the function below:

$(document).ready(function() {
   // unnecessary if you load all your scripts at the bottom of your page
});

Fiddle for the win! :)