Posts Tagged ‘Javascript’

Javascript: 1337-Speak Translator

February 3rd, 2009

So I borrowed this idea from a friend of mine who wrote the original implementation in C#, of which I ported to javascript because, well, I like playing in javascript.

Here’s a working example:

This is a simple method of converting between English and leet-speak. It uses Javascript’s regular expression library to do most of the heavy lifting, which led to a need to completely escape a string before using it in a regular expression. For this I borrowed some code from Simon Willison.

Here’s the html, pretty basic:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<body style="padding: 10px">
<div style="border: solid 1px Black; 
            padding: 5px; width: 350px; 
            background-color: White;">
    <label for="input">
        Enter message here:</label><br />
    <textarea id="input" name="input" rows="10" cols="40" 
    style="font-weight: bold;
           background-image: url('leetBG.png'); 
           background-attachment: fixed; 
           background-position: 160px 165px;
           background-repeat: no-repeat;"></textarea>
    <br />
    <input type="submit" value="Translate" 
     onclick="translateText();" />
    <select id="conversionType">
        <option value="e">English -> 1337</option>
        <option value="3">1337 -> English</option>
    </select>
</div>
</body>
</html>

And here’s the important stuff, the javascript:

<script type="text/javascript">
    // Create the Phrase translations arrays
    var PhrasesEnglish = 
        new Array('crap', 'dude', 'hacker',
                  'hacks', 'you', 'cool', 'oh my god',
                  'fear', 'power', 'own',
                  'what the hell', 'elite', 'for the win', 
                  'oh really', 'good game');
    var PhrasesLeet = 
        new Array('carp', 'dood', 'haxor', 'hax', 'joo',
                  'kewl', 'omg', 'ph43', 'powwah', 'pwn', 
                  'wth', 'leet', 'ftw', 'o rly', 'gg');
 
    // Create the Letter translations arrays
    var LettersEnglish = 
        new Array('n', 'b', 'k', 'd', 'e', 'f', 'g', 'h',
                  'p', 'm', 'r', 'l', 'o', 'q', 's', 't',
                  'u', 'x', 'w', 'y', 'z', 'c', 'a', 'j', 
                  'i', 'v', ' ');
    var LettersLeet = 
        new Array('/\\/', '|}', '|X', '[)', '3', '|=', 'gee', '|-|',
                  '|*', '(\\/)', '|2', '1', '()', '0', '$', '+',
                  '|_|', '><', '\\X/', '\'/', '2', '<', '/\\', '_|', 
                  '|', '\\/', '  ');
 
    // Translates text in input area to/from leet speak
    function translateText() {
        var inputString = document.getElementById('input').value;
 
        if (document.getElementById('conversionType').value == "e") {
            for (i = 0; i < PhrasesEnglish.length; ++i)
                inputString = inputString.replace(
                        new RegExp(PhrasesEnglish[i], "gi"),
                        PhrasesLeet[i]
                        );
 
            for (i = 0; i < LettersEnglish.length; ++i)
                inputString = inputString.replace(
                        new RegExp(LettersEnglish[i], "gi"),
                        LettersLeet[i]
                        );
        }
        else {
            for (i = 0; i < LettersLeet.length; ++i)
                inputString = inputString.replace(
                        new RegExp(RegExp.escape(LettersLeet[i]), "g"),
                        LettersEnglish[i]
                        );
 
            for (i = 0; i < PhrasesLeet.length; ++i)
                inputString = inputString.replace(
                        new RegExp(RegExp.escape(PhrasesLeet[i]), "g"),
                        PhrasesEnglish[i]
                        );
        }
 
        document.getElementById('input').value = inputString;
    }
 
    // This function is used to escape any special regular expression
    // characters in the search strings used to convert from leet to
    // english. Taken from: http://simonwillison.net/2006/Jan/20/escape/
    RegExp.escape = function(text) {
      if (!arguments.callee.sRE) {
        var specials = [
          '/', '.', '*', '+', '?', '|', '$',
          '(', ')', '[', ']', '{', '}', '\\'
        ];
        arguments.callee.sRE = new RegExp(
          '(\\' + specials.join('|\\') + ')', 'g'
        );
      }
      return text.replace(arguments.callee.sRE, '\\$1');
    }
</script>

So that’s it! It’s quite a bit of code, and there’s probably a better way of doing it but it was a lot of fun. Please post any suggestions or questions you might have.

Determine Credit Card Type with Javascript

November 7th, 2008

I don’t understand why most online commerce sites ask the user to select what type of credit card they are going to enter instead of discerning the type programmatically and displaying feedback to the user. So here’s a small example I came up with on how to do just this.

Here’s a working example:

Here’s the HTML:

<html>
  <body>
    <form>
      <input id="ccNumber" onChange="SetTypeText(this.value)" />
      <br />
      <div id="cardType"></div>
    </form>
  </body>
</html>

Here’s the important part, the javascript:

<script type="text/javascript">
 
	function SetTypeText(number)
	{
		var typeField = document.getElementById("cardType");
		typeField.innerHTML = GetCardType(number);
	}
 
        function GetCardType(number)
        {            
            var re = new RegExp("^4");
            if (number.match(re) != null)
                return "Visa";
 
            re = new RegExp("^(34|37)");
            if (number.match(re) != null)
                return "American Express";
 
            re = new RegExp("^5[1-5]");
            if (number.match(re) != null)
                return "MasterCard";
 
            re = new RegExp("^6011");
            if (number.match(re) != null)
                return "Discover";
 
            return "";
        }
</script>