CodeIgniter url_title() with Javascript
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:
01 | <form action="#" method="post"> |
03 | <label for="title">Title</label> |
04 | <input name="title" id="title" value="" onblur="makeFriendly()" onkeyup="makeFriendly();" /> |
08 | <label for="friendly">Friendly URL</label> |
09 | <input name="friendly" id="friendly" value="" /> |
13 | <input type="submit" name="submit" value="Save friendly URL" /> |
The Javascript:
01 | <script type=“text/javascript“ language=“javascript“> |
03 | function makeFriendly() { |
05 | var title = document.getElementById(“title“); |
06 | var friendly = document.getElementById(“friendly“); |
07 | friendly.value = cleanUp(title.value); |
11 | function cleanUp(str) { |
12 | str = str.toLowerCase(); |
13 | str = str.replace(/^s+|s+$/g, ““); |
14 | str = str.replace(/[_s]+/g, “-“); |
15 | str = str.replace(/[^a-z0-9-]+/g, ““); |
16 | str = str.replace(/[-]+/g, “-“); |
17 | str = str.replace(/^-+|-+$/g, ““); |
So there you have it. A Javascript version of url_title().
Update: This one-liner (using the prototype library) does the same thing 
1 | $("title").value = $F("friendly").strip().gsub(/s+/, '-').gsub(/[^a-zA-Z0-9-]+/, '').toLowerCase(); |
No related posts.
This entry was posted in
Javascript. Bookmark the
permalink.
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.
Watch out for the trailing ‘.’ in the URL above. http://www.tioso.com
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
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”
upps half of the stuff got eaten by the form submition….
Pingback: 029075e0878d
tHMvCO Hello!,
Hi!,
Good day!,