Monat: März 2017

Wer gerne on-the-fly URL-freundliche Strings erstellen möchte (aka „slugify„), der kann sich folgender Pipe bedienen:

/**
 * Create user friendly and URL valid name of the category name.
 * Source: https://gist.github.com/mathewbyrne/1280286
 */

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

@Pipe({name: 'slugify'})
export class SlugifyPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if( value == '' ) {
      return value;
    } else {
      return value.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
    }
  }
}

Das Original (=der JS-Aufruf) findet ihr hier: https://gist.github.com/mathewbyrne/1280286

[UPDATE]
Um deutsche Sonderzeichen zu beachten könnt ihr die Rückgabe wie folgt erweitern:

      return value.toString().toLowerCase()
          .replace(/ä/g, 'ae')             // Replace ä with ae
          .replace(/ö/g, 'oe')             // Replace ö with oe
          .replace(/ü/g, 'ue')             // Replace ü with ue
          .replace(/ß/g, 'ss')             // Replace ß with two s
          .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

[/UPDATE]