[JavaScript] 자바스크립트에서 replace 를 replaceAll 처럼 사용하여 모든 문자 바꾸기 (feat.정규식)

 

 

 

 

 

 

예를들어, "Pen pineapple apple pen." 라는 문장에서 "Pen" 을 검색해 "BANANA" 로 바꾸고싶다면 ?

 

 

 

 

 

JAVA 에서 replace() / replaceAll() 사용하기

 

 

Java 에서는 replace() / replaceAll() 을 사용하면 원하는 문자열을 모두 검색하여 치환할 수 있다.

 

String beforeStr= "Pen pineapple apple pen.";
 
String afterStr = beforeStr.replace("apple", "BANANA");       
// 출력: Pen pineBANANA BANANA pen.
 
String afterStrAll = beforeStr.replaceAll("apple", "BANANA"); 
// 출력: Pen pineBANANA BANANA pen.

 

 

 

위 결과를 보면,  자바에서는 replace(), replaceAll() 둘 다 찾고자 하는 문자를 모두 검색해 치환하는 결과값을 나타낸다.

 

그렇다면 replace(), replaceAll() 의 차이점은 뭘까?

( 다음 포스팅 할 거리 또 찾음 )

 

간단하게 먼저 설명하자면,

 

  * replace() 는 문자 그대로 인식

  * replaceAll() 은 정규식 표현을 인식

 

자세한 설명은 다음 포스팅에서~~

 

 

 

 

 

JAVASCRIPT 에서 replace() / replaceAll() 사용하기

 

 

자 그렇다면 본론으로 돌아가서, 그렇다면 자바스크립트에서는 replace() 와 replaceAll() 가 자바와 같이 사용될까 ??

안타깝게도 대답은 NO다. 뚜둥!!

 

 
var beforeStr= "Pen pineapple apple pen."; 
var afterStr = beforeStr.replace("apple", "BANANA"); // 출력: Pen pineBANANA apple pen. 
 
var afterStrAll = beforeStr.replaceAll("apple", "BANANA"); // ERROR !!!!!     
 

 

 

 

위 결과를 보면, Javascript에서  replace() 는 찾고자하는 문자 1개만 찾아 바꾼다.

그리고  replaceAll() 은 존재하지 않아 에러가 뙇!!!!

 

 

그렇다면 Javascript에서 찾고자하는 모든 문자를 바꾸기 위해서 어떻게 해야할까 ???

( 제목 속에 답이 있찌롱~~~~ )

 

replace()를 이용하여 모든 문자를 바꿀 수 있다!

 

차근차근 알아봅시당~~!

 

 

 

 

 

JAVASCRIPT 에서 replace 를 replaceAll 처럼 사용하여 모든 문자 바꾸기

 

 

replace()

Syntax

string.replace(searchvalue, newvalue)

Parameter values

* searchvalue :  (필수) 검색할 문자 (바꾸고자 하는 문자)

* newvalue :  (필수) 새로 바꿀 문자

Return value

새로운 값으로 변환되어 만들어진 새로운 문자열

* 출처: https://www.w3schools.com/jsref/jsref_replace.asp      

 

 

예를들어서 차례대로 설명해보겠습니다.

 

 

 

 

▶▷▶ 문자 1개 바꾸기

 

var str = "Mr Blue has a blue house and a blue car.";
 
var res = str.replace("blue", "red"); 
// 출력: Mr Blue has a red house and a blue car.

 

 

아래 테스트를 통해 문자 1개씩 바뀌는 것을 확인할 수 있다.

 

↓↓↓ 테스트 해보세용~!! ↓↓↓

 

Click the "Trt it!" button to replace "blue" with "red" in the paragraph below:

 

 

Mr Blue has a blue house and a blue car.

 

Try it!

 

 

 

 

▶▷▶ 모든 문자 바꾸기

 

var str = "Mr Blue has a blue house and a blue car.";
 
var res = str.replace(/blue/g, "red"); 
// 출력: Mr Blue has a red house and a red car.

 

 

 

드디어 오늘 포스팅의 목적!  자바스크립트에서 모든 문자 바꾸기!!

 

바로   정규식을 사용하여 replace  해주는 것이다.

그러면 replace 하기 위해 사용되는 정규식에 대해 간단히 정리해보자.

 

 

 * /searchvalue/ :  '/ /' 사이에 검색할 문자를 입력

 * searchvalue1 | searchvalue2 | ... :  여러개의 문자를 바꾸도 싶은 경우' | ' 로 구분하여 여러 문자 입력

 * g :  발생할 모든 패턴에 대한 전역 검색 (Global search)

 * i :  대/소문자 구분을 무시 (Case-insensitive search)

 * m :  여러줄 검색 (Multi-line search)

 

 

정규식(Regular Expression)은 문자열에서 문자 조합에 일치 시키기 위하여 사용되는 형식 언어이다. 주로 검색, 치환, 추출을 위한 패턴을 표현하는 데 사용된다. 자세한 설명과 특수문자는 MDN - JavaScript 정규식 에서 확인할 수 있다.

 

 

위 예제에서는  'g'  만 사용했으므로 어떤 결과가 나오는지 아래 테스트를 통해 확인해보자.

 

↓↓↓ 테스트 해보세용~!! ↓↓↓

 

Click the "Trt it!" button to replace "blue" with "red" in the paragraph below:

 

 

Mr Blue has a blue house and a blue car.

 

Try it!

 

 

 

 

▶▷▶ 대/소문자 구분 없이 모두 바꾸기

 

 

var str = "Mr Blue has a blue house and a blue car.";
 
var res = str.replace(/blue/gi, "RED"); 
// 출력: Mr RED has a RED house and a RED car.

 

 

 

 

위 예제에서는  'gi'  를 사용했으므로 어떤 결과가 나오는지 아래 테스트를 통해 확인해보자.

 

↓↓↓ 테스트 해보세용~!! ↓↓↓

 

Click the "Trt it!" button to replace "blue" with "red" in the paragraph below:

 

 

Mr Blue has a blue house and a blue car.

 

Try it!

 

 

 

 

▶▷▶ 여러 문자 바꾸기

 

 

var str = "Mr Blue has a blue house and a blue car.";
 
var res = str.replace(/blue|house|car/gi, function myFunction(x){return x.toUpperCase();});
// 출력: Mr BLUE has a BLUE HOUSE and a BLUE CAR.

 

 

 

 

위 예제에서는  ' | '  로 구분하여 바꾸길 원하는 문자를 모두 입력한 후 어떤 결과가 나오는지 아래 테스트를 통해 확인해보자.

 

↓↓↓ 테스트 해보세용~!! ↓↓↓

 

Click the "Trt it!" button to replace "blue" with "red" in the paragraph below:

 

 

Mr Blue has a blue house and a blue car.

 

Try it!

 

 

 

 

 

 

 

 

여기까지 자바스크립트에서 replace() 하는 여러가지 방법을 예제를 통해 알아보았다.

이제 까먹지 말쟈~~~~~~~