[Angular] 국내 연락처 변환용 pipe

gistfile1.txt

// contact.pipe.ts

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

@Pipe({ name: 'phone' })
export class ContactPipe implements PipeTransform {
  static format(num: string, displayType: 'normal'|'secret' = 'normal'): string {
    num = num.replace(/[^0-9]/g, '');
    let formatNum = '';
    if (num.length < 4) {
      return num;
    } else if (num.length < 8) {
      // 지역번호 제외 집전화 : @@@ - @@@@
      formatNum = displayType === 'secret' ? num.replace(/(\d{3})(\d{4})/, '***-$2') : num.replace(/(\d{3})(\d{4})/, '$1-$2');
    } else if (num.length < 9) {
      // 전국대표번호. Ex)1544-...., 1588-.... : @@@@ - @@@@
      formatNum = displayType === 'secret' ? num.replace(/(\d{4})(\d{4})/, '****-$2') : num.replace(/(\d{4})(\d{4})/, '$1-$2');
    } else if (num.length < 11) {
      if (num.startsWith('02')) {
        if (num.length < 10) {
          // 서울 일반 전화번호 : 02 - @@@ - @@@@
          formatNum = displayType === 'secret' ? num.replace(/02(\d{3})(\d{4})/, '02-***-$2') : num.replace(/02(\d{3})(\d{4})/, '02-$1-$2');
        } else {
          // 서울 국번 : 02 - @@@@ - @@@@
          formatNum = displayType === 'secret' ? num.replace(/02(\d{4})(\d{4})/, '02-****-$2') : num.replace(/02(\d{4})(\d{4})/, '02-$1-$2');
        }
      } else {
        // 지역번호 포함된 집전화 / 01x 구번호 사용자 가운데 3자리. @@@ - @@@ - @@@@
        formatNum = displayType === 'secret' ? num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-***-$3') : num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
      }
    } else {
      // 핸드폰 번호, 인터넷 전화. : @@@ - @@@@ - @@@@
      formatNum = displayType === 'secret' ? num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-***-$3') : num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
    }
    return formatNum;
  }

  constructor() { }
  public transform(num: string, displayType: 'normal'|'secret' = 'normal' ): string {
    return ContactPipe.format(num, displayType);
  }
}

gistfile2.txt

<!-- @@.component.html -->

<div>{{ '01012341234' | phone:'secret' }}</div> <!-- 010-****-1234 -->
<div>{{ '01012341234' | phone:'normal' }}</div> <!-- 010-1234-1234 -->
<div>{{ '01012341234' | phone }}</div> <!-- 010-1234-1234 -->

<input type="text" [(ngModel)]="inputVal" (keyup)="onNumberChanged($event.target.value)">


<!------------------------------>
// 입력시 input에 입력중인 데이터도 함께 변경하고자 하면, key이벤트를 받아 갱신해준다. 
// @@.component.ts

onNumberChanged(val: string) {
    // originNum : 서버상에 저장할 때 '-' (하이픈) 이 제외된 정보만 저장.
    const originNum = val.replace(/[^0-9]/g, '');
    this.inputVal = ContactPipe.format(originNum);
  }

gistfile3.txt

// 필자가 전역으로 사용하는 모듈입니다. ***** 해당 모듈은 app.module.ts 에 import 됩니다.
// app.module.ts 에 ContactPipe를 선언 (declarations) 하셔도 됩니다.
// shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// ...
import { ContactPipe } from 'src/sys/contact.pipe';



@NgModule({
  declarations: [
  	//...
    ContactPipe
  ],
  imports: [
    //...
    CommonModule
  ],
  exports: [
  	// 모듈에 선언된 pipe를 외부에서 사용가능하도록 하기 위해 exports에 선언해둔다.
    ContactPipe
  ]
})
export class SharedModule { }