Web/JavaScript

Javascript | 문자열, 글자 마스킹하는 함수

일렁이는코드 2022. 2. 20. 14:40

유저들의 랭킹을 보여줄 때, 닉네임을 그대로 노출하지 않고 앞에서부터 2글자만 노출한 뒤 뒷글자는 모두 *로 마스킹해야하는 기능을 구현하여야했다. 


🍋 구현 방법

간단하게 닉네임의 길이별로 조건을 걸어주고, 정규표현식을 사용하여 노출하는 글자 이후 문자는 모두 * 로 대체해준다. 
나는 3글자 이상의 닉네임이 들어올때에는 2글자 이후의 모든 문자는 *로 대체했고, 2글자 닉네임이 들어올때에는 1글자만 문자만 대체, 1글자의 닉네임이 들어오면 그대로 노출시켰다. 

const maskingName = (value) => {
    if (value.length === 2) {
      return value.replace(/(?<=.{1})./gi, '*');
    } else if (value.length > 2) {
      return value.replace(/(?<=.{2})./gi, '*');
    } else {
      return value;
    }
  };

 


🍋 결과 화면

maskingName("안녕하세요"); //안녕***
maskingName("안녕"); //안*
maskingName("하"); //하

퍼블리싱된 파일을 보고 백에서 받은 닉네임을 프론트에서 * 처리해서 보여주어야하는줄 알고, 미리 작업했었다가 결국 코드를 지우는 사태를 맞이했다 ㅠㅠ 서버에서 *처리를 하지 않고 보내준다면 네트워크탭에서 그대로 노출이 되므로 *처리를 하는 의미가 없다는것 .. 주니어 개발자는 오늘도 배웁니다 😂 

반응형