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]