본문 바로가기

개발&컴퓨터/JQuery & JS

Javascript 에서 replace정규식 그리고 replaceall과 같은 함수 구현하기.

반응형

Javascript에서는 특정 문자열에 포함된 문자열을 다른 문자열로 대체하기 위해 replace함수라는 것을 제공한다.

 

그런데 이 replace함수를 다른 언어의 그것과 동일하게 사용하면 다른 결과에 당황할 수 도 있다.

C나 Java 언어에서 replace함수를 사용하면 해당 문자열에 포함된 변경 대상 문자열을 모두 대체한다. (물론 특히 C계열은 덜한데, Java 같은 경우에는 특수 키워드(. | 등과 같은 문자마져 ㅠ.ㅠ)에 \를 포함해야 정상 동작하는 등 언어마다 조금씩 다른 차이가 있기는 하다. 보통 C는 . | 같은 문자는 특수 키워드로 보지 않는다.)

 

특수한 케이스를 제외하고, 단순 문자열 치환을 Java에서 예로 들어보자

 

// JAVA

 

String test = "Hello World! Nice to meet you!";

String revTest = test.replace("e", "o");

 

 

위 코드를 실행하면

revTest = "Hollo World! Nico to moot you!";

 

위와 같이 모든 e에 대해 o로 대체한다.

 

JavaScript에서 위와 유사한 코드를 실행해보자.

 

// Javascript

 

String test = "Who are you? I'm your father.";

String revTest = test.replace("you", "wow");

 

결과는

revTest = "Who are wow? I'm your father."

 

분명 뒤에 your 에 you가 또 존재하기 때문에 뒤에 있는 you도 wow로 대체될 것으로 생각했지만, 앞의 you만 wow로 대체되었다.

javascript는 위와 같은 방식으로 사용하면 처음 만나는 대체 문자만 대체한다.

 

그러면 어떻게 뒤에 나오는 you도 wow로 대체할 수 있을까?

즉 replace all 과 같은 기능을 구현하려면 어떻게 해야 할까?


 

 

간단하게는 javascript의 정규식(Regular expressions)을 사용하면 된다.

String revTest = test.replace(/you/g, "wow"); 또는

String revTest = test.replace(/you/gi, "wow");

결과는

revTest = "Who are wow? I'm wowr father."

 

Javascript의 정규식은 다음과 같은 형태로 사용한다.

replace(바꿀 문자, 바뀌어질 문자)

 

바꿀 문자는 다음과 같은 형태로 정규식으로 사용할 수 있다. (정규식을 사용하지 않으면 위의 예에서 보았듯이 대체 대상 문자 중에서 첫 번째 만다는 문자만 대체된다.)

 

 

/패턴/정규식옵션

 

패턴 : 대체할 문자를 입력

정규식옵션 : g, i, m 중에 필요한 것 입력

 

g (global) : 첫번째 문자만이 아닌 패턴에 해당하는 모든 문자들을 검색하여 대체한다.

i (ignoreCase) : 대소문자 구분하지 않음.

m (multillineM) : 여러 줄 검색

 

 

정규식을 사용하면 간단하게 해결할 수 있지만, 별도의 함수를 만들어서도 간단히 해결할 수도 있다.

 

replaceall을 구현한 함수는 상당히 많은데, 가장 간단하게 구현한 함수는 다음과 같다.

(이는 구글에서 검색한 함수로 많이 사용되고 있는 구현 방법 중에 하나이다. 내가 찾아본 함수 중에 replace의 특성을 잘 파악하여 가장 기발하게 구현한 것 같다.)

 

function replaceAll(str, searchStr, replaceStr) {

    return str.split(searchStr).join(replaceStr);
}

 

str : 문자열 대체를 처리할 원 문자열

targetStr : 대체하기 원하는 문자(열) - 바꿀 문자

replaceStr : 대체될 문자(열) - 바뀌어질 문자

 

 

* 동작 원리

split 함수를 통해 문자열 str을 searchStr(구분자)을 기준으로 분리한다.

이 때, 구분자는 모두 제거되며, 구분자를 기준으로 분리된 문자열들이 배열로 저장된다.

배열로 나온 결과를 다시 join 함수를 사용하여 searchStr(연결자)로 연결한다.

즉, replaceAll함수는 str문자열을 구분자(targetStr)로 한번 분리[split]하였다가 연결자(replaceStr)를 통해 다시 연결(join)된 결과 문자열을 리턴한다.

 

 

정말 간단하다. 다음과 같이 사용하면 된다.

 

String test = "Who are you? I'm your father.";

String revTest = replaceAll(test, "you", "wow");

 

결과는 위의 정규식을 사용한 것과 동일하다.


반응형