PUBLISHED: JULY 07 2023
Vanilla JS - Slugify a String in JavaScript
It's a pretty common requirement to convert a string into a slug for things like URL paths
with SEO friendly titles.
A slug is typically all lower case, separated by dashes (hyphens) instead of spaces and
doesn't contain any special characters.
JS Slugify Function
This is a little JavaScript slugify function I wrote recently to auto generate a slug from a title
text field. But it could be used to convert any string into a slug.
The function performs the following steps:
1. Converts to lower case and trims any leading or trailing spaces.
2. Removes any accents from characters (e.g. á, â, â, ã, ä, å, ç).
3. Replaces any other special characters with spaces.
4. Replaces multiple spaces or dashes (hyphens) with a single dash.
1 function slugify(input) {
2 if (!input)
3 return '';
4
5 // make lower case and trim
6 var slug = [Link]().trim();
7
8 // remove accents from charaters
9 slug = [Link]('NFD').replace(/[\u0300-\u036f]/g, '')
10
11 // replace invalid chars with spaces
12 slug = [Link](/[^a-z0-9\s-]/g, ' ').trim();
13
14 // replace multiple spaces or hyphens with a single hyphen
15 slug = [Link](/[\s-]+/g, '-');
16
17 return slug;
18 }
StackBlitz Demo
Here's a demo of the slugify function in action on StackBlitz. The slug field is auto generated
as you type a string into the title field.
[Link]
Vanilla JS Slugify
Enter a title to see the slugified version below.
Title
Slug
Vanilla JS - Slugify a String in JavaScript
[Link]
Console
Edit on Editor Preview Both
(See on StackBlitz at [Link] ([Link]
Need Some Vanilla JS Help?
Search fiverr ([Link] for freelance Vanilla JS developers.
Follow me for updates
On Twitter ([Link] or RSS (/rss).
When I'm not coding...
TRAILER - Australia by Motorcycle | 35,000KM Adventure Ri…
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride! ([Link]
More Vanilla JS Posts
• Vanilla JS - HTML Encode in JavaScript (/vanilla-js-html-encode-in-javascript)
• Vanilla JS - Wrap Object Methods in Try/Catch to Handle Errors in JavaScript (/vanilla-
js-wrap-object-methods-in-try-catch-to-handle-errors-in-javascript)
• JavaScript - Add Event Listener to Multiple Elements in Vanilla JS (/post/2023/01/06/
javascript-add-event-listener-to-multiple-elements-in-vanilla-js)
• Vanilla JS + CSS - Modal Popup (Dialog) Tutorial with Example (/post/2023/01/04/
vanilla-js-css-modal-popup-dialog-tutorial-with-example)
• JavaScript - Sort an Array of Objects by Property in Vanilla JS (/post/2022/12/16/
javascript-sort-an-array-of-objects-by-property-in-vanilla-js)
• JavaScript - Initialize Array with Conditional Values or Objects in Vanilla JS (/
post/2022/12/06/javascript-initialize-array-with-conditional-values-or-objects-in-
vanilla-js)
• Vanilla JS - 7 ways to convert a string to a number in JavaScript (/post/2021/10/15/
vanilla-js-7-ways-to-convert-a-string-to-a-number-in-javascript)
• Vanilla JS - Create an array with a range of numbers in a JavaScript (/post/2021/10/02/
vanilla-js-create-an-array-with-a-range-of-numbers-in-a-javascript)
• Vanilla JS - Get the max prop value from an object array in JavaScript (/
post/2021/09/14/vanilla-js-get-the-max-prop-value-from-an-object-array-in-
javascript)
Comments
Sponsored
This Could Be the Best Time to Trade Gold in 5 Years
IC Markets Learn More
Gold CFDs vs Futures: Which Suits Your Trading Style?
IC Markets Learn More
Play War Thunder now for free
War Thunder Play Now
Join new Free to Play WWII MMO War Thunder
War Thunder Play Now
Never Put Eggs In The Refrigerator. Here's Why...
Car Novels
The Top 25 Most Beautiful Women In The World
Articles Vally
Twitter ([Link]
GitHub ([Link]
RSS (/rss)
MONTHS
2024
March (/posts/2024/03) (2)
February (/posts/2024/02) (1)
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2012
2011
TAGS
Alerts, Angular, Angular 10, Angular 11, Angular 14, Angular 15, Angular 16, Angular 2,
Angular 4, Angular 5, Angular 6, Angular 7, Angular 8, Angular 9, Angular Directive,
Angular UI Router, AngularJS, Animation, [Link], [Link] Core, [Link] Web API,
Authentication and Authorization, AWS, Axios, Azure, Basic Authentication, Blazor,
Bootstrap, C#, Chai, Chrome, CKEditor, CSS3, Dapper, DDD, Deployment,
Design Patterns, Docker, Dynamic LINQ, EF Core, ELMAH, ES6, Exchange, Facebook,
Fetch, Fluent NHibernate, Formik, Git, GitHub, Google, Google Analytics, Google API,
Google Maps API, Google Plus, Heroku, HTML5, HTTP, IIS, Insecure Content,
Instagram API, Ionic Framework, iOS, iPhone, Java, JavaScript, jQuery, JWT, LinkedIn,
LINQ, Login, MEAN Stack, MERN Stack, MEVN Stack, Mocha, Modal, MongoDB, Moq,
MSSQL, MVC, MVC5, MySQL, .NET, NextJS, NGINX, ngMock, NHibernate, Ninject,
NodeJS, npm, Pagination, Pinia, Pinterest, PostgreSQL, Razor Pages, React,
React Hook Form, React Hooks, Recoil, Redmine, Redux, Registration, Repository, RxJS,
Security, Sequelize, Shell Scripting, Sinon, SinonJS, SQLite, SSH, TDD, Terraform,
Twitter, TypeScript, Ubuntu, Umbraco, Unit of Work, Unit Testing, URL Rewrite,
Validation, Vanilla JS, VS Code, Vue, Vue 3, Vuex, Webpack, Windows,
Windows Server 2008, Zustand (/posts/tag/zustand)
Powered by DigitalOcean - Get $200 Free Credit! ([Link]
© 2026 [Link]
Privacy Policy (/page/privacy-policy)