Repeatedly apply CSS to certain words

Question

I try to apply CSS several times and automatically to certain words.

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

Currently, I manually apply these colors around certain brand terms using span classes:

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

With CSS:

.twitter {
    color: #00ACED;
}

However, this is a process, and I would prefer a method that automatically completes this style. I have about 20 brand words with the appropriate color scheme.

Can anyone help me with this problem. I use WordPress if that matters.

Answer 1

- . , .

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

: .

Answer 2

, - jQuery highlight, . , . :

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

( jQuery JavaScript )

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

JavaScript ( body, :

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

!:)

Answer 3

If you know the minimum level of JavaScript, this JavaScript library can make your life a lot easier. it converts the entire letter into a string into a span tag. http://daverupert.com/2010/09/lettering-js/

Answer 4

For those of you who are interested in the answer, I 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;}