Pipes in angular(regex)

numeric regex, alpha numeric regex regex, email regex, phone regex, name regex, percentage regex, date regex, pan regex, ifsc regex, pincode regex, city name regex, gst regex no etc regex.

export class RegexService {
  constructor() { }

  get nameRegex() {
    return "^[a-zA-Z0-9-.'\\s]*$"; // only alphanumic and space . '
  }
  get nameWithSpaceRegex() {
    return "^[a-zA-Z\\s]*$"; // only alpha and space . '

  }
  get Email() {
    return '^.+@.+\\..+$'; // contains @ and . with text surrounding
  }

  get Phone() {
    return '^[6-9][0-9]{9}$'; // max 20 chars, numbers and -
  }

  get Percentage() {
    return '^(100([\.][0]{1,})?$|[0-9]{1,2}([\.][0-9]{1,})?)$'
  }

  get Date() {
    return '^[0-9]{2}-[0-9]{2}-[0-9]{4}$'; // mm-dd-yyyy, all numbers
  }

  get Aadhar() {
    return '[0-9]{12}';
  }
  get chequeNumber() {
    return '[0-9]{6}';
  }
  get Pan() {
    return '^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$'
  }
  get Ifsc() {
    return '^[A-Za-z]{4}[a-zA-Z0-9]{7}$'
  }

  get Pincode() {
    return '^[0-9]{6}$'
  }
  get CityName() {
    return '^([a-zA-Z]+|[a-zA-Z]+\s[a-zA-Z]+)$'
  }
  get Name() {
    return '^[a-zA-Z]+(?:-[a-zA-Z]+)*$'
  }

  get OTP() {
    return '^[1-9][0-9]{5}$'
  }

  get UserName() {
    return "^[a-zA-Z-.'\\s]*$"; // only alphanumic and space
  }
  get FullName() {
    return "^[A-Z][a-zA-Z]{3,}(?: [A-Z][a-zA-Z]*){0,2}$";
  }

  get numberAndAlphabates() {
    return "^[a-zA-Z0-9]*$"; //number and alphabates only
  }

  get GstNo() {
    return '^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$'
  }
  get alphaNumeric() {
    return '^[a-zA-Z0-9_.-]*$'
  }
  get onlyAlphabets() {
    return '[a-zA-Z][a-zA-Z ]+'
  }

  NumberKeyEvent(event: any) {
    var ASCIICode = event.which ? event.which : event.keyCode;
    if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) return false;
    return true;
  }
  NumberKeyEvent1(event: any) {
    const charCode = (event.which) ? event.which : event.keyCode;
    if ((charCode >= 48 && charCode <= 57)) {
      return true;
    }
    else {
      return false;
    }
  }
  AlphaNumericSpaceHyphenOnly2(event: any): Boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || (charCode == 32) ||
      (charCode >= 48 && charCode <= 57) || (charCode == 47) || (charCode == 45)) {
      return true;
    }
    else {
      return false;
    }



  Alpha(event: any): Boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) {
      return true;
    }
    else {
      return false;
    }
  }
}

====================================================

Replace pipe

#Create one pipe in angular and then paste the code below and call the pipe name "replace" in your html under string interpolation with pipe "|".

============replace.pipe.ts====================================
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'replace'
})
export class ReplacePipe implements PipeTransform {

  transform(value: string, regexValue: string, replaceValue: string): any {
    let regex = new RegExp(regexValue, 'g');
    return value.replace(regex, replaceValue);
  }
}


===================example.component.html========================
{{string | replace:'oldValue':'replaceValue'}} 

=================================================================
#Use this pipe for sanitize the youtube Url, to display in angular youtube url bellow safeurl and bind the api response in "iframe" tag.
==================HTML=============
<iframe [src]="youtube_url | safeUrl:'resourceUrl'"></iframe>






===========Youtube safe Pipe=====================
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safeUrl'
})
export class SanitizeurlPipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}
 public transform(value: any, type: string): SafeResourceUrl {
  let data=value.replace('watch?v=','embed/')
    switch (type) {
			case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(data);
			default: throw new Error(`Invalid safe type specified: ${type}`);
		}
  }
}

Find source code on git hub

https://github.com/pratik-maurya/angular-pipes

Leave a Reply