How to build permalinks with jQuery or Javascript? If you build web 2.0 applications or used WordPress as your blogging system you may be in touch with Slugs.
The slugs are pretty friendly URLs segments that allows to create permalinks SEO friendly.
Here are a couple of plugins that will allow you to create slugs or permalinks with jQuery using just Javascript and no server code. That’s useful for control panels or administration panels that require to create slugs on the fly.
jQuery Slug Plugin is one of these tools. If you check the source cod you will notice the plugin is pretty simple, just a few lines of code.
Special characters like accents (Tildes)
I made a simple update on this library to use special characters like accents in latin á é í ó ú and ñ. Since Javascript only support regular expressions for accents passed as unicode chars, then I used an array to define those chars (the original idea was taken somewhere else that I don’t remember, but the characters were taken from here).
And since I needed to functionality to return a string instead of updating a particular field given the css class, I got the function makeSlug and wrote a separate function that reads as follows:
function makeSlug(slugcontent)
{
// convert to lowercase (important: since on next step special chars are defined in lowercase only)
slugcontent = slugcontent.toLowerCase();
// convert special chars
var accents={a:/\u00e1/g,e:/u00e9/g,i:/\u00ed/g,o:/\u00f3/g,u:/\u00fa/g,n:/\u00f1/g}
for (var i in accents) slugcontent = slugcontent.replace(accents[i],i);
var slugcontent_hyphens = slugcontent.replace(/\s/g,'-');
var finishedslug = slugcontent_hyphens.replace(/[^a-zA-Z0-9\-]/g,'');
finishedslug = finishedslug.toLowerCase();
return finishedslug;
}
So, now I can call this function anywhere in the code and convert any string to a slug or permalink using Javascript.
To show an example: Ñandú and ñoquis will be converted to: nandu-and-noquis
Hmm nice effort. I have a question regarding this script.
It will replace all spaces into hyphen? What about if i type multiple spaces? Will it replace ` ` into `——-` ?
I hope I would be explaining my question in the easy way.
Thanks!
I ran in the same situation while trying to use it. I guess you should modify it to remove duplicated dashes. Good question
Enjoy.
Well I had created a script into ASP Classic for one of my friend.
You can find into my blog and convert into JavaScript.
You can add this two lines:
…
finishedslug = finishedslug.toLowerCase();
finishedslug = finishedslug.replace(/-+/g,’-'); // Remove multiple ‘-’
finishedslug = finishedslug.replace(/(^-)|(-$)/g,”); // Remove first and last character of the string if is ‘-’
Cheers!