Hidden

Overview

Converts a string to a URL-friendly slug format by normalizing accents, removing special characters, replacing spaces, and cleaning up the result with lowercase formatting.

slugify(/str/, <options>);

Features

• Creates URL-friendly slugs from any string
• Normalizes accented characters automatically
• Removes special characters and symbols
• Replaces spaces with hyphens or underscores
• Cleans up double dashes and initial dashes
• Configurable options for dashes and dots
• Returns lowercase formatted strings
• Comprehensive processing pipeline

Arguments

Arg	Type	Default Value	Required
str	string	-	Yes
options	SlugifyOptions	{}	No

SlugifyOptions

Property	Type	Default	Description
ignoreDashes	boolean	false	Keep existing dashes in the string
ignoreDots	boolean	false	Keep existing dots in the string
useDashes	boolean	true	Use dashes instead of underscores for spaces

Usage

Use the slugify() function to create URL-friendly slugs from strings.

import { slugify } from '@inpulse-ui/utils';

const result = slugify('Hello World!');
console.log(result); // "hello-world"

Handles accented characters:

console.log(slugify('Café Culture')); // "cafe-culture"
console.log(slugify('São Paulo Guide')); // "sao-paulo-guide"
console.log(slugify('Naïve Résumé')); // "naive-resume"
console.log(slugify('François & José')); // "francois-jose"

Removes special characters:

console.log(slugify('Hello, World!')); // "hello-world"
console.log(slugify('Product #123 @ $99.99')); // "product-123-99-99"
console.log(slugify('User & Admin (2024)')); // "user-admin-2024"
console.log(slugify('API v2.0 [Beta]')); // "api-v2-0-beta"

Using options to preserve characters:

// Preserve existing dashes
console.log(slugify('pre-existing-dashes', { ignoreDashes: true }));
// "pre-existing-dashes"

// Preserve dots (useful for filenames)
console.log(slugify('config.json file', { ignoreDots: true }));
// "config.json-file"

// Use underscores instead of dashes
console.log(slugify('hello world', { useDashes: false }));
// "hello_world"

Returns empty string for invalid inputs:

console.log(slugify('')); // ""
console.log(slugify(null)); // ""
console.log(slugify(undefined)); // ""
console.log(slugify(123)); // ""

Examples

Blog post URL generation:

const blogPosts = [
  'How to Build Amazing Web Apps',
  'JavaScript Tips & Tricks (2024)',
  'The Ultimate Guide to APIs',
  'Working with Databases: MySQL vs PostgreSQL'
];

const urlSlugs = blogPosts.map(title => slugify(title));
console.log(urlSlugs);
// [
//   'how-to-build-amazing-web-apps',
//   'javascript-tips-tricks-2024',
//   'the-ultimate-guide-to-apis',
//   'working-with-databases-mysql-vs-postgresql'
// ]

File name generation:

const documentTitles = [
  'User Manual v2.0',
  'Invoice #2024-001',
  'Meeting Notes (Q1 2024)',
  'Project Specs & Requirements'
];

const fileNames = documentTitles.map(title =>
  `${slugify(title)}.pdf`
);

console.log(fileNames);
// [
//   'user-manual-v2-0.pdf',
//   'invoice-2024-001.pdf',
//   'meeting-notes-q1-2024.pdf',
//   'project-specs-requirements.pdf'
// ]

Product URL generation:

const products = [
  { name: 'iPhone 15 Pro Max', category: 'Electronics' },
  { name: 'Nike Air Force 1 (White)', category: 'Shoes' },
  { name: 'MacBook Air 13" M2', category: 'Computers' }
];

const productUrls = products.map(product => ({
  ...product,
  url: `/products/${slugify(product.category)}/${slugify(product.name)}`
}));

console.log(productUrls);
// [
//   { name: 'iPhone 15 Pro Max', category: 'Electronics', url: '/products/electronics/iphone-15-pro-max' },
//   { name: 'Nike Air Force 1 (White)', category: 'Shoes', url: '/products/shoes/nike-air-force-1-white' },
//   { name: 'MacBook Air 13" M2', category: 'Computers', url: '/products/computers/macbook-air-13-m2' }
// ]

CMS content publishing - generating SEO-friendly URLs for articles:

import { slugify } from '@inpulse-ui/utils';

// Article data from CMS
const article = {
  title: 'The Complete Guide to Modern JavaScript: ES6+ Features & Best Practices',
  author: 'José María García',
  category: 'Web Development',
  publishDate: '2024-01-15'
};

// Generate SEO-friendly URL structure
function generateArticleUrl(article) {
  const categorySlug = slugify(article.category);
  const titleSlug = slugify(article.title);
  const dateSlug = article.publishDate.replace(/-/g, '/');

  return `/${categorySlug}/${dateSlug}/${titleSlug}`;
}

const articleUrl = generateArticleUrl(article);
console.log(articleUrl);
// "/web-development/2024/01/15/the-complete-guide-to-modern-javascript-es6-features-best-practices"

// Also generate meta tags
const metaTags = {
  canonical: `https://myblog.com${articleUrl}`,
  ogUrl: `https://myblog.com${articleUrl}`,
  slug: slugify(article.title)
};

console.log(metaTags);
// {
//   canonical: "https://myblog.com/web-development/2024/01/15/the-complete-guide-to-modern-javascript-es6-features-best-practices",
//   ogUrl: "https://myblog.com/web-development/2024/01/15/the-complete-guide-to-modern-javascript-es6-features-best-practices",
//   slug: "the-complete-guide-to-modern-javascript-es6-features-best-practices"
// }