garble function contest

Updated

So I couldn't help but play around a bit with this thing and see what other ways I could manipulate the document with as little code as possible. Suffice it to say that it can be shortened to work in an either/or scenario, but I like to make things with options for the user to play with.

Having said that, here are some variations on the above and benefits/disappointments:

Official Submission (473bytes)

Minified (473bytes) ¹

function t(e){var r=[],w;for(w=0;w<e.length;w++){if(e[w].nodeType===3)r.push(e[w]);else if(e[w].childNodes)r=r.concat(t(e[w].childNodes));}return r;}var e,x=t(document.body.childNodes),y,z;for(y=0;y<x.length;y++){x[y].data=x[y].data.replace(/\b[a-z]{4,}\b/ig,function(w){if(w.length==4&&(/^.([a-z])\1./i).test(w))return w;e=w;while(e==w){z=w.split('');e=z[0]+(z.slice(1,z.length-1).sort(function(a,b){return(Math.random()*2)>1?1:-1;}).join(''))+z[z.length-1];}return e;});} 

Un-minified version: (479bytes) ¹

function t(e){ var r=[],w; for(w=0;w<e.length;w++){ if(e[w].nodeType===3)r.push(e[w]); else if(e[w].childNodes)r=r.concat(t(e[w].childNodes)); } return r; } var x=t(document.body.childNodes); for(var y=0;y<x.length;y++){ x[y].data=x[y].data.replace(/\b[a-z]{4,}\b/ig,function(w){ if(w.length==4&&(/^.([a-z])\1./i).test(w)) return w; var e=w; while (e==w){ var x=w.split(''); e=x[0]+(x.slice(1,x.length-1).sort(function(a,b){ return(Math.random()*2)>1?1:-1; }).join(''))+x[x.length-1]; } return e; }); } 

• No use of jQuery ("pure javascript")
• Add <script src="garble.js"></script> just above </body> or wrap the code in an onload event.

¹ re-placement of var declarations makes it shorter, see 479bytes vs 473 byes)

Additional Versions

Basic (demo)

// jQuery Garble // "Basic" version // // Requirements: // 1. Find all words 4+ letters long (exclude hyphens, punctuation or numbers from // the classification) // 2. The words being garbled must follow: // a. They can not remain the same as the previous state // b. The first and last character must remain in-tact // 3. The garbling must be random and produce a new result each iteration. // // Usage: // $(selector).garble(options); // (function($){ $.fn.extend({ garble: function(options){ // basic options var o = $.extend({ flagChanges: false, changeClass: 'modified' },options); // iterate over elements return this.each(function(i,e){ var txt = $(e).text(); // locate words with 4+ letters $(e).html(txt.replace(/\b[a-z]{4,}\b/ig,function(w){ var e = w; // make sure we get an altered word back while (e==w){ var x = w.split(''); e = x[0]+(x.slice(1,x.length-1).sort(function(y,z){ return (Math.random()*2)>1?1:-1; // randomize }).join(''))+x[x.length-1]; } return (o.flagChanges?'<span class="'+o.changeClass+'">'+e+'</span>':e); })); }); } }); })(jQuery); 

Pros

1. Very slim and trim
2. Options that allow you to modify the modified word (wraps each change in a span with the default "modified" class, or a class of your choosing).

Cons

1. Won't work with nested elements (this means you have to select the lowest possible element in the DOM tree. So, if you're just going to be doing paragraphs with no hyperlinks or spans within, this is your winner)
2. If elements that have children are used in the selector, their html formatting (such as a linkin a paragraph) will be stripped.

Slim and Trim (demo)

$(function(){ // on load $('*','body').contents().map(function(i,e){ // grab all elements, return e.nodeType !== 3 ? null : e; // then filter by textual elements }).each(function(i,e){ // amd iterate through them. e.data = e.data.replace(/\b[a-z]{4,}\b/ig, function(w) { // go through and find 4+ letters words if (w.length==4&&w.substring(1,2)==w.substring(2,3)) // (avoid infinite loops on words that return w; // can't be changed [e.g. look]) var e = w; // Store the original word for comparison, but while (e==w){ // keep scrambling until we have a new word. var x = w.split(''); // (do so by breaking out middle letters in to array, e = x[0] + (x.slice(1, x.length - 1).sort(function(a,b){ // then sort those middle letters return (Math.random() * 2) > 1 ? 1 : -1; // based on a random number) }).join('')) + x[x.length - 1]; // Now, rejoin it all back together } return e; // and finally return the modified result. }); }); }); 

Fully Featured (demo)

// jQuery Garble // "Feature Rich" version // // Requirements: // 1. Find all words 4+ letters long (exclude hyphens, punctuation or numbers from // the classification) // 2. The words being garbled must follow: // a. They can not remain the same as the previous state // b. The first and last character must remain in-tact // 3. The garbling must be random and produce a new result each iteration. // // Usage: // $(selector).garble(options); // (function($) { $.fn.extend({ garble: function(options) { var o = $.extend({}, $.fn.garble.defaults, options); // takes in a string and performs the necessary manipulation(s) on it. Use regex // to only collect words greater than or equal to 4 characters long, and consider // punctuation not part of the word. var garbleStr = function(s,t){ return s.replace(/\b[a-z]{4,}\b/ig, function(w) { var e = o.algorithm(w); // if we're not performing a low-level parse and they want the changes styled, // return a span with either the detault class or their custom class if (t && !o.lowLevel && o.highLevel.flagChanges) return '<span class="'+o.highLevel.changeClass+'">'+e+'</span>'; // just return the new word return e; }); }; // Very high-level process. // Will only change the lowest node's text (so a paragraph // with links, only the links will be altered) var highLevel = function(i, e) { // we're not at the bottom element, keep going if ($(e).children().length>0){ return $(e).children().each(highLevel); } var t = $(e).text(); $(e).html(garbleStr(t,e.tagName!=='TEXTAREA')); }; // Low level process // Goes down to each individual element and changes it var lowLevel = function(i, e) { var d = e.data; e.data = garbleStr(d); }; // depending their selection, execute either or if (o.lowLevel){ return this.find('*').contents().map(function(i, e) { return (e.nodeType !== 3 ? null : e); }).each(lowLevel); }else{ return this.contents().each(highLevel); } }, }); // Defaults $.fn.garble.defaults = { // Perform low-level modification? (Modifies all words it finds, // not just the one farthests down the tree) lowLevel: false, // when lowLevel is set to false, these options are available: highLevel: { // wrap changes in a <span> flagChanges: false, // the class being applied to the above <span> changeClass: 'modified' }, // function used to garble the text. This will be passed each word // individually and should return the new word's value. algorithm: function(w) { // if w = "hello": // 1. Make an array out of the letters. // 2. keep the first and last in-tact, but use .slice() to extract the middle // 3. Perform the specified algorithm on the middle characters // 4. return result var e = w; while (e==w){ // secure it gets changed var x = w.split(''); e = x[0] + (x.slice(1, x.length - 1).sort(function(a,b){ return (Math.random() * 2) > 1 ? 1 : -1; }).join('')) + x[x.length - 1]; } return e; } }; })(jQuery); 

Pros

1. Flexible. This will work in just about every scenario, albeit a quick-to process bottom-of-the-food-chain element or calling it on the entire <body>--this can handle it.
2. Very customizable:
   1. Can specify to perform low level (every element) changes, or highLevel (only elements with no children)
   2. Can specify if you want to show the changes, and what class to apply (changes are wrapped in a span with the specified class name)
   3. Can specify a function to use for scrambling (maybe you want to just reverse the words or use a better method)

Cons

1. Little more overhead, though it is still fast.
2. Maybe too many options or just too bloated.
3. I'm sure someone will find more cons

Here's my take on the function. See the demo here.

• It uses the excellent jquery.ba-replacetext plugin to handle finding only text nodes
• Handles arbitrary length words where all inner characters are equal
• Easy to understand with descriptive names

Full version (1187 bytes):

 /* Called on document.ready */ $(function () { $("body *").replaceText(/\b([A-z]{4,})\b/g, scramble_inner ); }); /* Scramble the inner characters of a word */ function scramble_inner(word) { return word[0] + force_shuffle(word.slice(1, word.length - 1)) + word[word.length - 1]; } /* Randomize characters in the string, but check to make sure * they're different from the original. Handle's the special * case where all inner characters are equal, for instance "moooo". */ function force_shuffle(str) { if (all_chars_same(str)) return str; var result = str; while (str === result) { result = str.split('').sort(function() { return Math.floor(Math.random() * 2) ? 1 : -1; }).join(''); } return result; } /* Check whether all characters in the string are equal, eg "ooo" */ function all_chars_same(str) { for (i = 0; i < str.length; i++) { if (str[i] !== str[0]) { return false; } } return true; } 

Minified version (348 bytes):

$(function(){$("body *").replaceText(/\b([A-z]{4,})\b/g,a)});function a(w){return w[0]+b(w.slice(1,w.length-1))+w[w.length-1]}function b(s){if(c(s))return s;var r=s;while(s===r){r=s.split('').sort(function(){return Math.floor(Math.random()*2)?1:-1}).join('')}return r}function c(s){for(i=0;i<s.length;i++){if(s[i]!==s[0]){return false}}return true} 

Note: I ran this through JSLint, which may have been a bad idea. Anyway, the demo is here.

function shuffle(letters) { var i = letters.length - 2; while (i > 1) { var pos = Math.floor(Math.random() * i) + 1; var tmp = letters[i]; letters[i] = letters[pos]; letters[pos] = tmp; i--; } } function scramble(word) { if (word.slice(1, -2) == word.slice(2, -1)) { return word; } var letters = word.split(''); var result = word; while (result == word) { shuffle(letters); result = letters.join(''); } return result; } function process(node) { var data = node.data; if (/[a-z]{4}/i.test(data)) { node.data = data.replace(/[a-z]{4,}/gi, scramble); } } function traverse(element) { var node = element.firstChild; while (node) { if (node.nodeType == Node.ELEMENT_NODE) { traverse(node); } else if (node.nodeType == Node.TEXT_NODE) { process(node); } node = node.nextSibling; } } function garble() { traverse(document.body); } window.onload = garble;