본문 바로가기

프로그래밍/자바스크립트 (JS)

자바스크립트 문자 치환하기 : replace / replaceAll

 

자바스크립트 문자 치환하기 

 

(문자 또는 문자를 담은 변수).replace(a, b)

"문자에서 a라는 문자를 b로 변경한다"라는 뜻의 기능을 합니다. 

 

a에는 정규 표현식을 사용할 수 있습니다. (정규표현식은 관련 포스팅 참고)

자바스크립트 replace에서 정규식은 큰 따옴표 (")와 작은 따옴표(') 대신에 슬래시(/)를 사용하여 표현합니다.

(예: /정규표현식/)

b에는 정규표현식을 쓰지 않는 것 같습니다. 

하지만 a의 내용을 없애고 바꾸지 않고 덧붙여야 할 경우가 있습니다 (안녕! -> 안녕하세요!)

이럴때는 뒤에서 $1~$n까지 정규표현식의 ()괄호에 번호를 매겨 가져올 수 있습니다. 

무슨 말인가 하면 "안녕".replace(/안녕/, "$1하세요"); 와 같이 표현할 수 있다는 겁니다!

 

그러나....자바스크립트에서 replace는 한번만 치환됩니다. 또, replaceAll이라는 개념이 없어서 쓸 수 없습니다. 

 

그럼 여러번 사용해야 할 경우에는 어떻게 해야 할까요?

 

 

1. 정규표현식 사용

 

var text = "멍멍. 고양이는 멍멍 하고 소리를 낸다.  항상 소리를 낼때마다 "멍멍"이라고 한다. ";

 

var str = text.replace(/멍멍/g, "야옹");

 

console.log(str); //야옹. 고양이는 야옹 하고 소리를 낸다. 항상 소리를 낼때마다 "야옹"이라고 한다."

 

이렇게 해주면 모든 패턴에 대해 검색할 수 있다. (위의 정규표현식에서 g는 모든 패턴에 대해 전역 검색을 한다는 뜻)

 

 

2. 함수를 만들어 사용

 

function replaceAll(str, searchStr, replaceStr) {

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

}

replaceAll("javascript", "a", "b")

> 'jbvbscript'

 

이렇게 사용이 됩니다. 

응용하면, 몇번 제한해서 바꾸는 함수도 제작할 수 있습니다! (직접 만들어보기! (나중에 다룰 예정이에요;;))

출처: https://mingggu.tistory.com/64 [개발자 밍구]

 

 

3. String prototype 메서드 추가

 

//replaceAll prototype 선언

String.prototype.replaceAll = function(org, dest) {

return this.split(org).join(dest);

}

//replaceAll 사용

var str = "Hello World";

str = str.replaceAll("o","*");

alert(str);

 

이렇게해서 아예 메서드를 만들어 버려도 됩니다!

가장 신박하고 좋을 거 같은 방법입니다!

 

출처 : https://gent.tistory.com/18 [젠트]

반응형