IT 성장일기
[Javascript] replace 함수 3차원으로 활용하기(feat. 정규식) 본문
반응형
replace 함수 3차원으로 활용하기(feat. 정규식)
replace
자바스크립트에서 제공하는 replace 함수는 문자열의 특정 키워드 한 개를 원하는 키워드로 치환시켜 주는 함수입니다.
let text = 'black white'
text.replace('black', 'white');
정말 자주 사용하는 함수이지만 아쉽게도 한 번 사용할 때마다 한 개의 키워드만 치환할 수 있습니다.
let text = 'black white black black white white black'
text.replace('black', 'white');
그래서 replace 함수를 1차원 함수라고 혼자 정의했습니다.
replaceAll
물론 큰 문제가 되지는 않습니다. replaceAll 함수는 문자열의 모든 특정 키워드를 치환해 줍니다.
let text = 'black white black black white white black'
text.replaceAll('black', 'white');
하지만 replaceAll 함수에도 아쉬운 점이 있습니다. 바로 대소문자를 구분한다는 거죠.
let text = 'black white Black black white white BLACK'
text.replaceAll('black', 'white');
그래서 또 혼자 replaceAll 함수를 2차원 함수라고 정의 내렸습니다.
replace + regular expression
그렇다면 문자열 전체에서 대소문자 구분 없이 키워드를 치환하는 방법이 없을까요?
편리한 방법이 있습니다. 바로 찾고자 하는 키워드를 정규식으로 작성하는 방법입니다.
사용방법은 아래와 같습니다.
- 찾고자 하는 텍스트를 슬래쉬( / )로 감싼다.
- 전역(global)을 뜻하는 g 플래그를 붙인다.
- 대소문자를 구분하지 않도록(Insensitive) i 플래그를 붙인다.
이렇게 하면 replace 함수 하나만으로도 문자열 전체에서 특정 키워드를 찾으며 대소문자 구분 없이 키워드를 치환해 줍니다.
let text = 'black white Black black white white BLACK'
text.replace(/black/gi, 'white');
저는 이렇게 해서 replace 함수를 3차원으로 사용합니다.
도움이 되어드렸다면 공감은 됐고 광고 한 번만 눌러주세요😄
감사합니다!
반응형
'Script > Javascript' 카테고리의 다른 글
[Javascript] 템플릿 리터럴(Template literal) 응용하기 (2) | 2024.12.02 |
---|---|
[Javascript] 템플릿 리터럴(Template literal) 사용하기 (0) | 2024.11.30 |
[Javascript] 정규식으로 이름과 휴대전화번호 유효성 검증하기 (4) | 2024.10.30 |
[Javascript] Clipboard API와 execCommand를 이용해 텍스트 복사하기 (1) | 2024.10.10 |
[Javascript] 자바스크립트를 이용해서 예쁜 토스트 메시지 만들기 (0) | 2024.10.10 |