Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- JavaScript
- 구글 메일보내기
- 메일 보내기 react
- react swiper
- React 나이스 신원인증
- 함수
- next.js kakaomap
- nextjs contact us
- 알고리즘
- Next.js 나이스 본인인증
- swiper
- 다중포인터
- 사이트맵
- 프론트 본인인증
- 프론트엔드 질문
- web3-react
- robots.txt
- 카카오맵 api
- nextjs 메일보내기
- next.js 지도 구현
- 빈도수세기
- CSS
- pass인증
- 프로그래머스
- 카카오지도 구현
- react
- github
- nextjs
- Til
- 전체 너비로 css
Archives
- Today
- Total
YEV.log
Javascript | 문자열, 글자 마스킹하는 함수 본문
유저들의 랭킹을 보여줄 때, 닉네임을 그대로 노출하지 않고 앞에서부터 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("하"); //하
퍼블리싱된 파일을 보고 백에서 받은 닉네임을 프론트에서 * 처리해서 보여주어야하는줄 알고, 미리 작업했었다가 결국 코드를 지우는 사태를 맞이했다 ㅠㅠ 서버에서 *처리를 하지 않고 보내준다면 네트워크탭에서 그대로 노출이 되므로 *처리를 하는 의미가 없다는것 .. 주니어 개발자는 오늘도 배웁니다 😂
반응형
'Web > JavaScript' 카테고리의 다른 글
javascript | Cookie 설정하기, value 가져오기, 삭제하기 (0) | 2022.07.19 |
---|---|
jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달) (0) | 2022.07.18 |
Javascript | 로그인 기능 구현 (2) | 2021.10.24 |
JavaSctipt | DOM 이란? (1) | 2021.10.24 |
JavaScript | 객체 속성에 접근하는 방법 (점 표기법 / 대괄호 표기법) (0) | 2021.09.06 |