Angular Pipe to transform a string into a slug

slugify.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'slugify'})
export class SlugifyPipe implements PipeTransform {
  transform(input: string): string {
    return input.toString().toLowerCase()
      .replace(/\s+/g, '-')           // Replace spaces with -
      .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
      .replace(/\-\-+/g, '-')         // Replace multiple - with single -
      .replace(/^-+/, '')             // Trim - from start of text
      .replace(/-+$/, '');            // Trim - from end of text
  }
}

your.component.ts

import { SlugifyPipe } from '../../shared/slugify.pipe'; 
//remember to add this pipe as a module provider. In my case it is declared as a provider in my SharedModule

@Component({
   //... 
})

export class YourComponent{
  constructor(private slugifyPipe: SlugifyPipe){}
  
  slugify(input: string){
      var your_new_slug = this.slugifyPipe.transform(input);
  }
}

Thanks! But this does not replace Turkish chars like ü ö ğ ç ı ş.

Hi, thanks @djabif. @anelad I implemented Turkish character support here: https://gist.github.com/coskuncakir/3378d0147968e4297eb20a1d214296eb

thanks @coscakir!

thanks @coscakir!

Thank you so much for this! Spent 4 hours+ trying to understand replace () in Angular to create this specific pipe!

Thank you !

For Spanish Language you have this one https://gist.github.com/ruslanguns/192bfb952df48325a1c15e648f88f0a7 based in the sample of @coscakir

thanks

Thank you!

could you show the full implementation?

This is amazing, exactly what I needed! Can't believe this doesn't come with Angular by default 🤔 Thank you!

This is amazing, exactly what I needed! Can't believe this doesn't come with Angular by default 🤔 Thank you!

Thanks 😍

Thank you!

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'slugify',
})
export class SlugifyPipe implements PipeTransform {
  transform(value: string): string {
    return value
      .toLowerCase()
      .replace(/[àÀáÁâÂãäÄÅåª]+/g, 'a') // Special Characters #1
      .replace(/[èÈéÉêÊëË]+/g, 'e') // Special Characters #2
      .replace(/[ìÌíÍîÎïÏ]+/g, 'i') // Special Characters #3
      .replace(/[òÒóÓôÔõÕöÖº]+/g, 'o') // Special Characters #4
      .replace(/[ùÙúÚûÛüÜ]+/g, 'u') // Special Characters #5
      .replace(/[ýÝÿŸ]+/g, 'y') // Special Characters #6
      .replace(/[ñÑ]+/g, 'n') // Special Characters #7
      .replace(/[çÇ]+/g, 'c') // Special Characters #8
      .replace(/[ß]+/g, 'ss') // Special Characters #9
      .replace(/[Ææ]+/g, 'ae') // Special Characters #10
      .replace(/[Øøœ]+/g, 'oe') // Special Characters #11
      .replace(/[%]+/g, 'pct') // Special Characters #12
      .replace(/\s+/g, '-') // Replace spaces with -
      .replace(/[^\w\-]+/g, '') // Remove all non-word chars
      .replace(/\-\-+/g, '-') // Replace multiple - with single -
      .replace(/^-+/, '') // Trim - from start of text
      .replace(/-+$/, ''); // Trim - from end of text
  }
}