Skip to content

Instantly share code, notes, and snippets.

@hagemann
Last active October 30, 2023 09:10
Show Gist options
  • Save hagemann/382adfc57adbd5af078dc93feef01fe1 to your computer and use it in GitHub Desktop.
Save hagemann/382adfc57adbd5af078dc93feef01fe1 to your computer and use it in GitHub Desktop.
Slugify makes a string URI-friendly
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
}
@jschwendener
Copy link

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 ?

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.

@darksnake747
Copy link

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. 👍

@cespadatheboton
Copy link

Thank you very much for your code, I think it would be better with ø :-)

@hagemann
Copy link
Author

hagemann commented May 4, 2019

@cespadatheboton Updated, thank you!

@raydvard
Copy link

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 ?

@wojtekelvis
Copy link

I think it would be even better with those ąćęśłż :)

@hagemann
Copy link
Author

@wojtekelvis Thanks for contributing! I’ve added these.

@DanRobinsonMV
Copy link

I absolutely love this!

I'd like to know if I'm free to use this code - what license are you distributing it under?

@hagemann
Copy link
Author

hagemann commented Jul 8, 2019

@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!

@zendiik
Copy link

zendiik commented Jul 9, 2019

Wow, that's awesome piece of code :)

I think there's a ě and ď missing.

@hagemann
Copy link
Author

@zendiik Added them. Thanks for helping out!

@DanRobinsonMV
Copy link

@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!

@KarllosSouza
Copy link

Great code! Congrats!

Just a suggestion: if we add a .trim() at the end of line 6, we can remove lines 12 and 13.

@hagemann
Copy link
Author

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/

@KarllosSouza
Copy link

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!

@Doaa-Ahmed
Copy link

It would be nice if you can add these characters as well ā ē ī ō õ

@hagemann
Copy link
Author

@Doaa-Ahmed I’ve added these characters. Thanks for making this gist better!

@BayBreezy
Copy link

Thanks again!

@kenlas
Copy link

kenlas commented Oct 22, 2019

Thank you Matthias for this function!
Please note that it is missing the letter 'ő' from the hungarian alphabet.

@hagemann
Copy link
Author

@kenlas Very welcome, and thanks :) If other letters are missing, please let me know.

Copy link

ghost commented Nov 4, 2019

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
}

@meowsus
Copy link

meowsus commented Jan 27, 2020

@sorahn
Copy link

sorahn commented Apr 22, 2020

@hagemann could you please add an explicit license to this gist? :)

@jyoo
Copy link

jyoo commented Apr 30, 2020

Wow! This is amazing. Thank you so much @hagemann!

@janguianof
Copy link

Thank you so much!

@melih
Copy link

melih commented Jul 24, 2021

It can support Turkish "İ" and "ı" characters with the lines below,

const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'
const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'

@hagemann
Copy link
Author

@melih I’ve added the 2 characters. Thanks for contributing.

@sezerkarakaya
Copy link

Thank you so much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment