SOPA Script

I thought it would be interesting to make a script to censor your content to help draw attention to how ridiculous SOPA is. So I made something you can drop onto your site and it’ll automatically censor parts of your content (note this requires jQuery).

DEMO or DOWNLOAD

It’s fairly straight forward. First we set a window load event and wrap it in a closure so we don’t make the ‘$’ conflict with any other libraries.

(function($) {
    $(window).load(function() {

    });
})(jQuery);

Then we want to grab all the elements that might have text in them. There’s a special jQuery function here called “each” it simply takes the array of all the elements in jQuery selector and loops through them, passing in an “index” to an anonymous function:

(function($) {
    $(window).load(function() {
        $('h1, h2, h3, h4, p, span').each(function(index) {

            // each element in here

        });
    });
})(jQuery);

Then we’ll split the content up by spaces so we can loop through each word of the the content.

(function($) {
    $(window).load(function() {
        $('h1, h2, h3, h4, p, span').each(function(index) {

            var contentArr = this.textContent.split(" "),
                collector = '';

            for(var i = 0; i < contentArr.length; i++) {

                // each word in here

            } // end i

        });
    });
})(jQuery);

Then we’ll set a random number 1-100 and determine if the number is lower than 35%. This will censor about 35% of our content. We’ll test for this and replace the word with censored content. We’ll also add our words to the “collector” which will replace the content in each of our elements:

(function($) {
    $(window).load(function() {
        $('h1, h2, h3, h4, p, span').each(function(index) {

            var contentArr = this.textContent.split(" "),
                collector = '';

            for(var i = 0; i < contentArr.length; i++) {

                var rand = Math.floor(Math.random() * 100);

                // block out about 35% of the words on the page
                if(rand < 35) {

                    // replace the word with censored characters here

                }

                collector = collector + contentArr[i] + ' ';

            } // end i

        });
    });
})(jQuery);

Finally, if we are going to replace the word with censored characters then we’ll add another loop that gets the length of the word and replaces it with black blocks. Finally here’s the whole thing:

(function($) {
    $(window).load(function() {
        // get all text
        $('h1, h2, h3, h4, p, span').each(function(index) {

            var contentArr = this.textContent.split(" "),
                collector = '';

            for(var i = 0; i < contentArr.length; i++) {

                var rand = Math.floor(Math.random() * 100);

                // block out about 35% of the words on the page
                if(rand < 35) {
                    var censorBar = '&#9608';

                    for(var t = 0; t < contentArr[i].length; t++) {

                        censorBar = censorBar + '&#9608';

                    }

                    console.debug(censorBar);

                    $('footer').html(censorBar);

                    contentArr[i] = censorBar;

                }

                collector = collector + contentArr[i] + ' ';

            } // end i

            // i could put some css transition or fade on this to make it more interesting

            $(this).html(collector);

        });
    });
})(jQuery);