자바스크립트의 문자열에서 특정 문자를 치환하는 방법을 소개합니다.
String 타입은 replace()
함수를 제공하며 이것을 이용하여 문자열의 특정 문자열을 다른 문자열로 변환할 수 있습니다.
replace()
는 먼저 검색되는 1개의 문자열만 변환하는데요, 여러 문자열을 변환할 때는 정규 표현식을 이용하여 일치하는 모든 문자열을 변환할 수 있습니다.
1. replace()로 문자열 치환
replace('old', 'new')
는 문자열에 있는 old를 new로 바꾼 문자열을 리턴합니다.
let str = 'Hello world, Java';
str = str.replace('Java', 'JavaScript');
console.log(str);
Output:
Hello world, JavaScript
바꾸려는 문자열이 여러개 있어도, 가장 먼저 찾은 문자열 1개만 변환합니다.
let str = 'Hello world, Java, Java, Java';
str = str.replace('Java', 'JavaScript');
console.log(str);
Output:
Hello world, JavaScript, Java, Java
2. 정규식을 이용하여 모든 문자열 치환
문자열 안에 변경하려는 문자열을 여러개 있고 모든 문자열을 바꾸고 싶을 때, 정규식을 이용하여 모든 문자열을 변경할 수 있습니다.
replace(/[old str]/g, '[new str]')
는 문자열에 있는 모든 old string
을 new string
으로 변환합니다.
아래 예제에서 /Java/g
가 정규 표현식인데, 정규표현식은 /Pattern/flag
처럼 패턴과 플래그로 구성됩니다.
그리고 주의할 점은 찾으려는 문자열에 따옴표를 입력하지 않아야 합니다.
아래 예제는 문자열에 있는 Java
를 모두 JavaScript
로 변환하는 예제입니다. 플래그 g
는 모든 문자열을 변환하라는 의미입니다.
let str = 'Hello world, Java, Java, Java';
str = str.replace(/Java/g, 'JavaScript');
console.log(str);
Output:
Hello world, JavaScript, JavaScript, JavaScript
3. 대소문자 구분하지 않고 문자열 치환
아래 예제는 아무 문자열도 치환하지 않습니다. 그 이유는 대소문자를 구분하기 때문에, java
와 동일한 문자열이 없기 때문에 아무것도 변경하지 않습니다.
let str = 'Hello world, Java, Java, Java';
str = str.replace(/java/g, 'JavaScript');
console.log(str);
Output:
Hello world, Java, Java, Java
대소문자를 구분하지 않고 변경하려면 아래처럼 플래그에 i
를 추가하시면 됩니다. 결과를 보시면 모든 문자열이 변환된 것을 확인하실 수 있습니다.
let str = 'Hello world, Java, Java, Java';
str = str.replace(/java/gi, 'JavaScript');
console.log(str);
Output:
Hello world, JavaScript, JavaScript, JavaScript
4. 모든 숫자를 공백으로 치환
문자열에 있는 모든 숫자를 제거할 때, 숫자를 공백으로 치환하면 됩니다.
패턴 [1-9]
는 1부터 9까지 숫자를 의미하며, 이 범위의 숫자에 해당하면 공백으로 치환합니다.
let str = 'This123is456Java789script';
str = str.replace(/[1-9]/gi, '');
console.log(str);
Output:
ThisisJavascript
5. 연속된 숫자들을 하나의 문자로 치환
아래 예제의 패턴에서 +
는 1개 이상의 문자 패턴입니다. [1-9]
패턴은 숫자 1개를 의미하지만, [1-9]+
는 연속된 숫자들을 의미합니다.
아래 예제에서 123
, 456
, 789
가 하나의 패턴으로 검색되어, 각각 @
로 치환됩니다. +
가 없다면 9개의 숫자가 별개의 패턴으로 인식되어 9개의 @
로 치환됩니다.
let str = 'This123is456Java789script';
str = str.replace(/[1-9]+/gi, '@');
console.log(str);
Output:
This@is@Java@script
6. 더 많은 정규표현식 예제
정규 표현식을 배우는 것이 쉽지는 않지만, 여러 프로그래밍 언어에서 동일한 규칙으로 사용됩니다. 현재 정규표현식이 익숙하지 않다면, 어떤 원리로 동작하는지 기초적인 내용만 먼저 공부하시고 나중에 구현에 필요한 내용이 있을 때 그것과 관련된 패턴을 찾아보고 학습하셔도 좋을 것 같습니다.
말씀드린 것처럼 정규표현식의 내용은 방대하고, 이 글은 replace()
를 소개하는 글이기 때문에, 정규표현식에 대한 자세한 내용은 담지 못하였습니다. Mozilla - Regular Expressions 페이지를 참고하셔도 좋고, 구글에서 정규표현식으로 검색하시면 다양한 자료가 있습니다.
Related Posts
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기
- JavaScript - 특정 값으로 배열 채우기, Array.fill()
- JavaScript - null, undefined 체크 방법
- JavaScript - 배열을 객체로 변환, 4가지 방법
- JavaScript - 이번 달(특정 달)의 1일, 마지막 일 구하기
- JavaScript - 배열의 특정 요소 삭제 방법
- JavaScript - 배열에 특정 값이 포함되어있는지 확인
- JavaScript - Date에 시간(일/시/분/초) 더하기
- JavaScript - 변수가 배열인지 확인, 3가지 방법
- JavaScript - 변수가 문자열인지 확인
- JavaScript - 문자열이 숫자인지 확인
- JavaScript - Map의 key를 배열로 변환
- JavaScript - Map의 value를 배열로 변환
- JavaScript - Map 요소 삭제 방법