How to add style to a string of text throughout WordPress website?

If it’s purely for setting the style of the text you may want to use JavaScript/jQuery instead. Here’s a quick sample that would replace all instances of “ipsum” with

<span class="red">ipsum</span>

And the full code:

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(document.body, /ipsum/g, function(node, match) {
    var span= document.createElement('span');
    span.className="red";
    node.splitText(match.index + 5); // +5 is the length of the string to replace
    span.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

Fiddle:

http://jsfiddle.net/QH5nG/5/

Replace text code found here:

https://stackoverflow.com/questions/1501007/how-can-i-use-jquery-to-style-parts-of-all-instances-of-a-specific-word#answer-1501213

Related Posts: