CodeIgniter url_title() with Javascript

9 Responses October 4th, 2007 | Ekerete.

CodeIgniter has got a nifty url_title() function as part of the url helpers and I’ve frequently used this. This takes in a title, sentence, whatever and “creates a human-friendly URL string”.
For instance, passing “What time is it?” as a parameter will return “what-time-is-it” and this can be used in a url string for better search engine indexing and a neater and more professional url structure.

I needed to do the same with javascript.

The HTML:

<form action="#" method="post">
    <p>
	<label for="title">Title</label>
	<input name="title" id="title" value="" onblur="makeFriendly()" onkeyup="makeFriendly();" />
    </p>

    <p>
	<label for="friendly">Friendly URL</label>
	<input name="friendly" id="friendly" value="" />
    </p>

    <p>
	<input type="submit" name="submit" value="Save friendly URL" />
    </p>

</form>

The Javascript:

<script type=“text/javascript“ language=“javascript“>

function makeFriendly() {

    var title = document.getElementById(“title“);
    var friendly = document.getElementById(“friendly“);
    friendly.value = cleanUp(title.value);

}

function cleanUp(str) {
    str = str.toLowerCase(); //change everything to lowercase
    str = str.replace(/^s+|s+$/g, ““); //trim leading and trailing spaces
    str = str.replace(/[_s]+/g, “-“); //change all spaces and underscores to a hyphen
    str = str.replace(/[^a-z0-9-]+/g, ““); //remove all non-alphanumeric characters except the hyphen
    str = str.replace(/[-]+/g, “-“); //replace multiple instances of the hyphen with a single instance
    str = str.replace(/^-+|-+$/g, ““); //trim leading and trailing hyphens

    return str;
}

</script>

So there you have it. A Javascript version of url_title().

Update: This one-liner (using the prototype library) does the same thing ;) 

$("title").value = $F("friendly").strip().gsub(/s+/, '-').gsub(/[^a-zA-Z0-9-]+/, '').toLowerCase();

9 Responses to “CodeIgniter url_title() with Javascript”

  1. William Ukoh Says:
    October 6th, 2007

    A pretty nice and handy function. But I always prefer rewriting urls at the server-side (using either php or coldfusion). at least I am sure my pages won’t run into any unusual javascript errors or worse, not run ’cause javascript is disbaled.

    An example of a site I implemented my custom url rewriting is http://www.tioso.com. Try searching, browsing the pages and notice how the URLs are nicely rewritten, SES style.

  2. William Ukoh Says:
    October 6th, 2007

    Watch out for the trailing ‘.’ in the URL above. http://www.tioso.com

  3. Daniel Errante Says:
    October 8th, 2007

    This function is handy. If you are doing any work with databases, I wouldn’t use javascript as the only validation, but if someone has javascript enabled, you could use AJAX and javascript to verify and interact with a database without any problems

  4. nicolash Says:
    March 3rd, 2008

    Be more nice to your Customers, give them nicer “Friendly Urls”….
    so if they have “Iñtërnâtiônàlizætiøn” in their title they don’t end up with “Itrntinliztin”…
    I use this with prototype…

    Object.extend(String.prototype, {

    substituteSpecialchars: function() {
    var CHAR_TABLE = [['ÀÁÂÃÅ???', 'A'], ['Ä', 'Ae'], ['àáâãå???', 'a'], ['ä', 'ae'], ['Æ', 'AE'], ['æ', 'ae'], ['Ç????', 'C'], ['ç????', 'c'], ['??', 'D'], ['??', 'd'], ['ÈÉÊË?????', 'E'], ['èéêë?????', 'e'], ['ƒ', 'f'], ['????', 'G'], ['????', 'g'], ['??', 'H'], ['??', 'h'], ['ÌÍÎÏ?????', 'I'], ['ìíîï?????', 'i'], ['?', 'IJ'], ['?', 'J'], ['?', 'j'], ['?', 'K'], ['??', 'k'], ['?????', 'L'], ['?????', 'l'], ['Ñ????', 'N'], ['ñ?????', 'n'], ['ÒÓÔÕØ???', 'O'], ['Ö', 'Oe'], ['òóôõø???', 'o'], ['ö', 'oe'], ['Œ', 'OE'], ['œ', 'oe'], ['???', 'R'], ['???', 'r'], ['?Š???', 'S'], ['?š???', 's'], ['ß', 'ss'], ['????', 'T'], ['????', 't'], ['ÙÚÛ??????', 'U'], ['Ü', 'Ue'], ['ùúû??????', 'u'], ['ü', 'ue'], ['?', 'W'], ['?', 'w'], ['Ý?Ÿ', 'Y'], ['ýÿ?', 'y'], ['?Ž?', 'Z'], ['ž??', 'z']];
    var string = this;

    for (var i = 0; i “Internationalizaetion”

  5. nicolash Says:
    March 3rd, 2008

    upps half of the stuff got eaten by the form submition….

  6. 029075e0878d Says:
    May 6th, 2008

    029075e0878d…

    029075e0878d3eb50175…

  7. name Says:
    August 22nd, 2008

    tHMvCO Hello!,

  8. name Says:
    September 1st, 2008

    Hi!,

  9. name Says:
    September 1st, 2008

    Good day!,

Leave a Reply