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();
No related posts.
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!,