Simple Obfuscated Text

Example of using HTML5 custom data attributes to add obfuscated text to a page.

by Alexander

HTML

<!-- Each of these elements has a custom attribute called "data-text" that our JavaScript will pickup
automatically and grab the value from when building out the text we want to display on the page. -->
<span data-text="John" style="color: red">Bob Smith (this name will be replaced)</span>
and
<span data-text="Jane"style="color: green"></span>

<p data-text="Bill" style="color: blue">This text will also be replaced.</p>

JavaScript

// Wait for the page to finish loading before running this code.
$(document).ready(function () {
    // This function just returns a string of text.
    function getObfuscatedText() {
        var lName1 = 'D';
        var lName2 = 'o';
        var lName3 = 'e';
        return lName1 + lName2 + lName3;
    }

    // Go through every element on the page that has our custom "data-text" attribute.
    $('[data-text]').each(function () {
        // Build out the string that we want displayed.
        var textValue = $(this).attr('data-text') + " " + getObfuscatedText();
        // Set the text for the elemant to the string we want displayed.
        $(this).text(textValue);
    });
});