Hack 24. Convert Graphical Smileys to Text

Are you tired of little smiley icons infesting web pages and discussion forums? Convert them back to text!

I originally wrote this hack in response to a joke. Someone on the Greasemonkey mailing list announced that he had developed a user script to convert ASCII smileys such as :-) to their graphical equivalents. Someone else responded, wondering how long it would take for someone to do the reverse: convert graphical smileys back to text.

For the record, it took me about 20 minutes. Most of the time was spent researching publishing software that autogenerated graphical smileys and compiling a comprehensive list of variations.

The list of smileys in this hack was taken from http://www.phpbb.com/admin_demo/admin_smilies.htm. PHPBB is a popular application for hosting web-based discussion forums.

3.5.1. The Code

This user script runs on all pages. It relies on the fact that most graphical smileys are autogenerated by web publishing software, and the software puts the text equivalent of the smiley in the image's alt attribute. This means we can find images that are smileys by checking the alt attribute against a list of known values. Images that are not smileys, but just happen to have useful alternate text, will not be affected.

Save the following user script as frownies.user.js:

 // ==UserScript== // @name Frownies // @namespace http://diveintomark.org/projects/greasemonkey/ // @description convert graphical smilies to text // @include * // ==/UserScript== var arSmilies = [ ":)", ":-)", ":-(", ":(", ";-)", ";)", ":-D", ":D", ":-/", ":/", ":X", ":-X", ":\">", ":P", ":-P", ":O", ":-O", "X-(", "X(", ":->", ":>", "B-)", "B)", ">:)", ":((", ":(((", ":-((", ":))", ":-))", ":-|", ":|", "O:-)", "O:)", ":-B", ":B", "=;", "I)", "I-)", "|-)", "|)", ":-&", ":&", ":-$", ":$", "[-(", ":O)", ":@)", "3:-O", ":(|)", "@};-", "**==", "(~~)", "*-:)", "8-X", "8X", "=:)", "<):)", ";;)", ":*", ":-*", ":S", ":-S", "/:)", "/:-)", "8-|", "8|", "8-}", "8}", "(:|", "=P~", ":-?", ":?", "#-O", "#O", "=D>", "~:>", "%%-", "~O)", ":-L", ":L", "[-O<", "[O<", "@-)", "@)", "$-)", "$)", ">-)", ":-\"", ":^O", "B-(", "B(", ":)>-", "[-X", "[X", "\\:D/", ">:D<", "(%)", "=((", "#:-S", "#:S", "=))", "L-)", "L)", "<:-P", "<:P", ":-SS", ":SS", ":-W", ":W", ":-<", ":<", ">:P", ">:-P", ">:/", ";))", ":-@", "^:)^", ":-J", "(*)", ":GRIN:", ":SMILE:", ":SAD:", ":EEK:", ":SHOCK:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:", ":RAZZ:", ":OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:", ":WINK:", ":!:", ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:", ":MRGREEN:"]; var snapImages = document.evaluate("//img[@alt]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = snapImages.snapshotLength - 1; i >= 0; i--) { var elmImage = snapImages.snapshotItem(i); var sAltText = elmImage.alt.toUpperCase( ); for (var j = arSmilies.length - 1; j >= 0; j--) { if (sAltText == arSmilies[j]) { var elmReplacementText = document.createTextNode(sAltText); elmImage.parentNode.replaceChild(elmReplacementText, elmImage); } } } 

3.5.2. Running the Hack

Before installing the user script (Tools Install This User Script), go to http://www.phpbb.com/admin_demo/admin_smilies.htm. This page demonstrates the smiley capabilities of the PHPBB application. Users type text into their forum post, and PHPBB converts the text to a graphical smiley based on a set of rules, as shown in Figure 3-8.

Figure 3-8. Web page with graphical smileys

Now, install the user script from Tools/Install This User Script, and then refresh the page at http://www.phpbb.com/admin_demo/admin_smilies.htm. All the graphical smileys will be replaced by their original text equivalents, as shown in Figure 3-9.

3.5.3. Hacking the Hack

A big part of this hack is devoted to finding all the graphical smileys on a page by looking for images with a certain alt attribute. Once you find them, you can do anything you want with them. For example, if you want to remove the smileys altogether, replace the inner for loop with this:

Figure 3-9. Web page with text smileys

 for (var j = arSmilies.length - 1; j >= 0; j--) { if (sAltText == arSmilies[j]) {    elmImage.parentNode.removeChild(elmImage); }