Geek asks and answers

How can I use greasemonkey and javascript to change the color of each letter on a page randomly selected?

So, I read a few similar questions, and I managed to do things like changing the background color, but I still could not get it to work;

I want every subsequent letter on the page to be randomly colored. The color space used is not very important, as it is easy to fix when it really works (I am using this at the moment), but I can’t even get the text to change the color yet. I hope I just make a stupid mistake somewhere ...

This is what I am trying at the moment; and it kind of works, but it really depends on what tagName I use, and due to the nature of most web pages, it can break a lot of things if I am not careful ...

jsFiddle

var elements = document.getElementsByTagName('p');
for(var i=0,l=elements.length;i<l;++i) {

    var str = elements[i].textContent;
    elements[i].innerHTML = '';

    for(var j=0,ll=str.length;j<ll;++j) {
        var n = document.createElement('span');
        elements[i].appendChild(n);
        n.textContent = str[j];
        n.style.color = get_random_colour();
    }
}
function get_random_colour() {
    var letters = '0123456789ABCDEF'.split('');
    var colour = '#';
    for (var i = 0; i < 6; i++ ) {
        colour += letters[Math.round(Math.random() * 15)];
    }
    return colour;
}​

In this example, p works fine and doesn't seem to break anything, but if I do *or htmlor bodythen it breaks the page. Is there a way to get all the text on the page and not break it?

One more thing; I later changed the color function to hopefully only select colors that are in HSV (random, 1,1), so that I only get bright colors, but it doesn't work. I assume that I just have a JS error, but I am not familiar with JS, so it's hard for me to find ...

Here are the changes

+3
source share
1

, , HTML-.

. jsFiddle.

var x  = document.querySelector ("body"); // Etc.
buggerTextNodesIn (x);

function buggerTextNodesIn (node) {
    var wrapClass   = 'gmColorBarf';

    function turnerizeTextNodes (node) {
        if (node.nodeType === Node.TEXT_NODE) {
            //--- Skip this node if it already been wrapped.
            if ( ! node.parentNode.classList.contains (wrapClass) ) {
                var oldText = node.nodeValue;
                var parent  = node.parentNode;

                for (var J = 0, len = oldText.length;  J < len;  ++J) {
                    var wrapSpan    = document.createElement ("span");
                    wrapSpan.classList.add (wrapClass);
                    wrapSpan.textContent = oldText[J];
                    wrapSpan.style.color = getRandomColor ();

                    parent.insertBefore (wrapSpan, node);
                }
                parent.removeChild (node);
            }
        }
        else if (node.nodeType === Node.ELEMENT_NODE) {
            /*--- IMPORTANT! Start "bottom up" since we will be adding
                gazillions of nodes and "top down" would skew our length measurement.
            */
            for (var K = node.childNodes.length - 1;  K >= 0;  --K) {
                turnerizeTextNodes (node.childNodes[K] );
            }
        }
    }

    turnerizeTextNodes (node);
}


function getRandomColor () {
    var letters = '0123456789ABCDEF'.split ('');
    var color   = '#';
    for (var J = 0;  J < 6; ++J) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


, iframed @include, @exclude / @match URL- iframe - .

+2

More articles:


All Articles