Archive for the ‘Web Development’ category

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>

C#: Retrieve data from webpage

September 29th, 2008

So I came across a fun assignment this week that I’m sure has been done by many different people in many different programming languages. The challenge was to “scrape” a website for information autonomously and save it off to a file.

I accomplished this by first using a wrapper class for .NET’s own HTTPWebRequest object that simplified posting to a web site and retrieving the result. I then used regular expressions to find the data I wanted, stored it in a string, and later wrote it to a file.

I’m not going provide the specific program I wrote as it’s still proprietary, but I will give a small example of how this can be done. The example will include: posting to a website, retrieving the results (HTML for the page), and parsing the resulting page to find what you want.

The class I used to post to the site was done by Robert May and can be found here: http://geekswithblogs.net/rakker/archive/2006/04/21/76044.aspx

Here is an example of using this class to perform a search at CraigsList under the ‘for sale’ category and retrieving the results:

// Create the post object
PostSubmitter post =
    new PostSubmitter("http://provo.craigslist.org/search/sss");
 
// Add our parameters
post.PostItems.Add(
    "query",
    "Ford Truck"
);
 
// Specify our action type (Post | Get)
post.Type = PostSubmitter.PostTypeEnum.Get;
 
// Retrieve the results
string result = post.Post();

» Read more: C#: Retrieve data from webpage