JavaScript - 문자열 바꾸기(replace, 정규식 치환)

자바스크립트의 문자열에서 특정 문자를 치환하는 방법을 소개합니다.

1. replace()로 문자열 치환

String 타입은 replace()함수로 특정 문자열을 다른 문자열로 변환할 수 있습니다.

• 기본적으로 replace()는 먼저 검색되는 1개의 문자열만 변환
• 여러 문자열을 변환할 때는 정규 표현식을 이용하여 일치하는 모든 문자열을 변환할 수 있음

예를 들어, 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

문자열 순서만 거꾸로 변환하려면 replace() 대신에 reverse() 함수를 사용해야 합니다. 자세한 것은 "JavaScript - 문자열 뒤집기, 거꾸로 출력"를 참고하시면 됩니다.

2. 정규식을 이용하여 모든 문자열 치환

문자열 안에 변경하려는 문자열을 여러개 있고 모든 문자열을 바꾸고 싶을 때, 정규식을 이용하여 모든 문자열을 변경할 수 있습니다.

• replace(/[old str]/g, '[new str]')는 문자열에 있는 모든 old string을 new string으로 변환

아래 예제에서 정규표현식은 /Java/g 인데, 정규표현식은 /Pattern/flag처럼 패턴과 플래그로 구성됩니다.

• /Java/g에서 패턴은 Java, 플래그는 g가 됩니다.
• 주의할 점은 찾으려는 문자열에 따옴표를 입력하지 않아야 합니다.

아래 예제는 문자열에 있는 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. 대소문자 구분하지 않고 문자열 치환

아래 예제는 아무 문자열도 치환하지 않습니다. 그 이유는 replace()가 대소문자를 구분하여 문자열을 찾기 때문입니다. 즉, 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

i 플래그 대신에, 문자열을 대문자 또는 소문자로 변환하고 비교할 수도 있습니다. 자세한 내용은 "Java - 대소문자 변환 & 구분없이 비교"를 참고해주세요.

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 페이지를 참고하셔도 좋고, 구글에서 정규표현식으로 검색하시면 다양한 자료가 있습니다.