Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
}
@joaquinbravo-natgeo
Copy link

joaquinbravo-natgeo commented Oct 11, 2018

@KPChakravarthy
Copy link

KPChakravarthy commented Nov 30, 2018

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 ?

@jschwendener
Copy link

jschwendener commented Dec 10, 2018

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

darksnake747 commented Jan 15, 2019

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

cespadatheboton commented Mar 11, 2019

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

raydvard commented May 23, 2019

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

wojtekelvis commented Jun 28, 2019

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

@hagemann
Copy link
Author

hagemann commented Jun 29, 2019

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

@DanRobinsonMV
Copy link

DanRobinsonMV commented Jul 8, 2019

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

hagemann commented Jul 10, 2019

@zendiik Added them. Thanks for helping out!

@DanRobinsonMV
Copy link

DanRobinsonMV commented Jul 10, 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!

Perfect, thanks so much for the snippet!

@KarllosSouza
Copy link

KarllosSouza commented Jul 26, 2019

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

hagemann commented Jul 30, 2019

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

KarllosSouza commented Aug 8, 2019

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

Doaa-Ahmed commented Sep 17, 2019

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

@hagemann
Copy link
Author

hagemann commented Sep 19, 2019

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

@BayBreezy
Copy link

BayBreezy commented Oct 13, 2019

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

hagemann commented Oct 31, 2019

@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

janguianof commented Nov 2, 2020

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

hagemann commented Jul 26, 2021

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

@sezerkarakaya
Copy link

sezerkarakaya commented Apr 24, 2022

Thank you so much.

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