replace() 함수를 이용하여 문자열의 특정 문자열을 다른 문자열로 변환할 수 있다.
먼저 검색되는 1개의 문자열만 변환하지만, 정규 표현식을 이용하여 일치하는 모든 문자열을 변환할 수 있다.
정규표현식 이란?
문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리할 수 있도록 하는 수단이다.
1. 정규 표현식 패턴
1-1) 매칭 패턴
패턴 | 의미 |
a-zA-Z | 영어알파벳(-으로 범위 지정) |
ㄱ-ㅎ가-힣 | 한글 문자(-으로 범위 지정) |
0-9 | 숫자(-으로 범위 지정) |
. | 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X) |
\d | 숫자 |
\D | 숫자가 아닌 것 |
\w | 영어 알파벳, 숫자, 언더스코어(_) |
\W | /w 가 아닌 것 |
\s | space 공백 |
\S | space 공백이 아닌 것 |
\특수기호 | 특수기호 |
- 매칭 패턴을 사용하면, 훨씬 쉽게 문자/숫자/기호를 표현할 수 있습니다.
1-2) 검색 패턴
기호 | 의미 |
[] | 괄호안의 문자들 중 하나 |
[^문자] | 괄호안의 문자를 제외한 것 |
^문자열 | 특정 문자열로 시작(괄호 없음 주의!) |
문자열$ | 특정 문자열로 끝남 |
() | 그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌) |
(?: 패턴) | 그룹 검색(분류X) |
\b | 단어의 처음/끝 |
\B | 단어의 처음/끝이 아님 |
- 검색 패턴을 이용하면, AND, OR, StartWith, EndWith 등의 다양한 조합을 만들 수 있습니다.
1-3) 수량 패턴
기호 | 의미 |
? | 최대 한번(없음 |
* | 없거나 있거나 (없음 |
+ | 최소 한개(한개 |
{n} | n개 |
{Min,} | 최소 Min개 이상 |
{Min, Max} | 최소 Min개 이상, 최대 Max개 이하 |
- 특정 패턴의 반복 횟수로 조건을 걸 수 있다.
1-4) 정규 표현식 플래그
플래그 | 의미 |
g | Global: 모든 문자 검색(안 쓰면 매칭되는 첫 문자만 검색) |
i | Ignore Case: 대소문자 구분 안함 |
m | Multi line: 여러 행의 문자열에 대해 검색 |
- 동시에 여러개 사용할 수도 있다 (gi, gm 등)
1-5) 정규 표현식 메서드
메서드 | 의미 |
("문자열").match(/정규표현식/플래그) | "문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환 |
("문자열").replace(/정규표현식/, "대체문자열") | "정규표현식"에 매칭되는 항목을 "대체문자열"로 변환 |
("문자열").split(정규표현식) | "문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환 |
(정규표현식).test("문자열") | "문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환 |
(정규표현식).exec("문자열") | match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환) |
- 자바스크립트 코드 상에서는 아래 메서드를 통해 패턴을 검사하고, 매칭되는 문자열을 추출, 변환합니다
2. replace() 사용 방법
let str = 'Hello, Jacob';
str = str.replace('Jacob', 'cob');
console.log(str); // Hell, cob
let str2 = 'Hello, Jacob Jacob Jacob';
str2 = str2.replace('Jacob', 'cob');
console.log(str2); // Hell, cob jacob jacob
- 바꾸려는 문자열이 여러개 있어도, 가장 먼저 찾은 문자열 1개만 변환
- replace(변경 값, 치환 값)
3. replaceAll() 정규표현식을 사용한 치환 방법
let str = "45,65,6sdf54";
str.replaceAll(/[\D]/gi, "");
console.log(str); // 4565654
- 정규 표현식에 일치하는 모든 문자열 치환
- 검색 패턴 '[]' : 괄호 안의 문자열
- 정규표현식 플래그 'gi' : g => 매칭되는 모든 문자, i => 대소문자 구분 안 함
- 매칭 패턴 ' \D ' : 문자가 아닌 것
- replaceAll(정규식, 치환 값)
4. replace와 replaceAll의 차이
replace는 특정 문자 하나만 치환할 수 있는 반면 replaceAll은 정규 표현식을 사용하여 모든 문자열을 치환할 수 있다. 물론 replace도 'g' 옵션을 적용한다면 해당하는 모든 문자열을 치환할 수 있지만, repalceAll의 경우 특정 문자 하나만 치환할 수 없다는 차이점이 있다.
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript] Set 객체(Set Object) 메서드 및 반복문 사용 방법 (0) | 2022.12.02 |
---|---|
[JavaScript] Map 객체(Map Object) 메서드 및 반복문 사용 방법 (0) | 2022.12.01 |
[JavaScript] 고차함수 map(), filter(), reudce() 사용 방법 (0) | 2022.11.29 |
[JavaScript] 고차 함수 some(), every() 사용 방법 (0) | 2022.11.28 |
[JavaScript] slice를 이용한 배열의 원소 교체 (0) | 2022.09.07 |