-
-
Save hagemann/382adfc57adbd5af078dc93feef01fe1 to your computer and use it in GitHub Desktop.
function slugify(string) { | |
const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;' | |
const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------' | |
const p = new RegExp(a.split('').join('|'), 'g') | |
return string.toString().toLowerCase() | |
.replace(/\s+/g, '-') // Replace spaces with - | |
.replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters | |
.replace(/&/g, '-and-') // Replace & with 'and' | |
.replace(/[^\w\-]+/g, '') // Remove all non-word characters | |
.replace(/\-\-+/g, '-') // Replace multiple - with single - | |
.replace(/^-+/, '') // Trim - from start of text | |
.replace(/-+$/, '') // Trim - from end of text | |
} |
Hey, this is amazing :) but what if the slug foo-bar
already exists? Will the new one automatically be appended with a number to make it unique? like foo-bar-1
?
Hey, this is amazing :) but what if the slug
foo-bar
already exists? Will the new one automatically be appended with a number to make it unique? likefoo-bar-1
?
It's on you to store all generated slugs and write some kind of logic to avoid duplicates. The snippet above only converts your string into a URL-optimized slug.
Another thing that could be worth considering for a more complete solution would be the removal of stop words - however, personally, I keep my stop words. Keeping them or removing them seems to be an interesting discussion on its own in the SEO world, but having the option here to say, "do this to remove stop words" would be a nice addition to this already excellent code snippet! Thank you for sharing. 👍
Thank you very much for your code, I think it would be better with ø :-)
@cespadatheboton Updated, thank you!
Well, I was working with many slugify functions to make a nice url slug from a string. I found it neat and working function, but it would be great to add a little bit more amazing functionality to parse multi language string, wouldn't it ?
like unicoded strings to make it a nice url slug ?
I have tried with french, german, chinese, arabic and bengali string, but it does not work, is there any suggestions or update on this function to make it work ?
I think it would be even better with those ąćęśłż :)
@wojtekelvis Thanks for contributing! I’ve added these.
I absolutely love this!
I'd like to know if I'm free to use this code - what license are you distributing it under?
@DanRobinsonMV You are free to use it, even for commercial apps. Would appreciate a link to this Gist in your code so you can always refer back for potential changes!
Wow, that's awesome piece of code :)
I think there's a ě and ď missing.
@zendiik Added them. Thanks for helping out!
@DanRobinsonMV You are free to use it, even for commercial apps. Would appreciate a link to this Gist in your code so you can always refer back for potential changes!
Perfect, thanks so much for the snippet!
Great code! Congrats!
Just a suggestion: if we add a .trim()
at the end of line 6
, we can remove lines 12
and 13
.
Thanks @KarllosSouza! While technically true, I would keep the original version because it will also discard dashes at the beginning or end: https://jsfiddle.net/mhagemann/7arg58o0/1/
Thanks @KarllosSouza! While technically true, I would keep the original version because it will also discard dashes at the beginning or end: https://jsfiddle.net/mhagemann/7arg58o0/1/
Yeah... I didn't think of those cases.
Thanks for the answer!
It would be nice if you can add these characters as well ā ē ī ō õ
@Doaa-Ahmed I’ve added these characters. Thanks for making this gist better!
Thanks again!
Thank you Matthias for this function!
Please note that it is missing the letter 'ő' from the hungarian alphabet.
@kenlas Very welcome, and thanks :) If other letters are missing, please let me know.
arabic
function slugify(string) {
const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'
const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'
const p = new RegExp(a.split('').join('|'), 'g')
return string.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
.replace(/&/g, '-and-') // Replace & with 'and'
.replace(/[^[a-zA-Z0-9أ-ي]-]+/g, "") // Arabic support
.replace(/--+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, '') // Trim - from end of text
}
You don't need to escape those pesky dashes: https://gist.github.com/meowsus/e75867610b7d851baacf37567ce7c409/revisions
@hagemann could you please add an explicit license to this gist? :)
Wow! This is amazing. Thank you so much @hagemann!
Thank you so much!
It can support Turkish "İ" and "ı" characters with the lines below,
const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'
const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'
@melih I’ve added the 2 characters. Thanks for contributing.
Thank you so much.
Linking to the original post on medium: https://medium.com/@matthagemann/the-ultimate-way-to-slugify-a-url-string-in-javascript-b8e4a0d849e1