How to Make Slugify Function in JavaScript and PHP

In the realm of web development, “slugify” refers to the art of transforming a string, such as a page title or file name, into a URL-friendly format. This process is vital for creating user-friendly URLs that are both easy to comprehend and navigate. Imagine you have a blog post titled “My Funky Post”; through slugification, you can convert it into a neat URL like “my-funky-post”.

Slugification serves various purposes. Content management systems (CMS) often utilize slugification to automatically generate user-friendly URLs for pages or blog posts. Similarly, in applications like file-sharing platforms, slugification helps create safe and readable file names for uploaded content.

This simple yet powerful technique not only enhances user experience but also boosts your website’s SEO by creating more accessible URLs.

Slugify in JavaScript:

Here’s a JavaScript function that achieves slugification:

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

This JavaScript function first converts the string to lowercase, replaces spaces with hyphens, removes special characters, replaces ampersands with “and”, handles multiple hyphens, and trims any extra hyphens from the start or end of the string.

Slugify in PHP:

In PHP, you can achieve slugification using the following function:

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

  $string = mb_strtolower($string, 'UTF-8');
  $string = preg_replace('/\s+/', '-', $string);
  $string = preg_replace_callback($p, function ($match) use ($a, $b) {
    return $b[mb_strpos($a, $match[0], 0, 'UTF-8')];
  }, $string);
  $string = str_replace('&', '-and-', $string);
  $string = preg_replace('/[^\w-]+/', '', $string);
  $string = preg_replace('/-{2,}/', '-', $string);
  $string = trim($string, '-');

  return $string;
}

In PHP, this function performs similar operations as the JavaScript counterpart, ensuring a clean and user-friendly slug.

Implementing these slugify functions in your web applications will contribute to creating readable, SEO-friendly URLs, enhancing user experience, and making your web content more accessible and appealing.