Apply Css Repeatedly To Specific Words

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 ap

Solution 1:

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 andthen 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 onwhere the script should look for the words. It supports case-sensitivity and other options, likein the caseof 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)

<scripttype="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! :)

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

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

Solution 4:

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