Html & Script

자바스크립트 replace / 문자열 변경하기

컨텐츠 정보

본문

 replace 란?

 

   replace 는 문자열중 조건에 맞는 문자열을 다른 문자열로 변경하여 리턴하는 함수입니다.

 

 - 자바스크립트 replace 사용방법

 

   "[문자열]".replace("[변경할 문자열 패턴]""[새로운 문자열]");

 

 - 예제 1

 

   변수 str을 생성하여 문자열 "홍길동,일지매,임꺽정" 을 담으시오.

 

 

 - 예제 1 소스

 

   var str "홍길동,일지매,임꺽정";

 

 - str 변수 확인

 

   document.write("str : " + str + "<br>");

 

   결과

   str : 홍길동,일지매,임꺽정 

 

 - 예제 2

 

   replace를 이용하여 str변수의 ","를 "|"로 바꾸시오.

 

 

 - 예제 2 소스

 

   var str = str.replace(",""|");

 

 - str 변수 확인

 

   document.write("str : " + str + "<br>");

 

   결과

   str : 홍길동/일지매,임꺽정 

 

 [참고사항] 예제 2 의 결과가 예상과 다른 이유

 

   예제 2 를 보면 replace 를 이용하여 ","를 "|"로 바꾸었으나 가장 앞에 존재하는 ","만 바뀌었습니다.

   이는 자바스크립트 replace의 특성으로 자바스크립트 replace는 1회만 문자열을 바꾸기 때문에 그렇습니다.

   따라서 모든 문자열을 바꾸려면 아래와 같이 하셔야 합니다.

 

 - 자바스크립트 모든 문자열 replace 사용방법 (replaceAll)

 

   "[문자열]".replace(/[변경할 문자열 패턴]/g"[새로운 문자열]");

 

 - 예제 3

 

   문자열 "홍길동,일지매,임꺽정"의 모든 ","를 replace를 이용하여 "|"로 바꾸시오.

 

 

 - 예제 3 소스

 

   document.write("홍길동,일지매,임꺽정".replace(/,/g, "|") + "<br>");

 

   결과

   홍길동|일지매|임꺽정

 

 [참고사항] 모든 문자열 패턴이 변경된 이유

 

   replace문 안에 정규식을 사용하여 모든 문자열 패턴이 변경되었습니다.

   [변경될 문자열 패턴] 을 /[변경될 문자열 패턴]/으로 정규식 형태로 변환하였으며, g옵션을 붙였습니다.

   /[변경될 문자열 패턴]/g 에서 g는 모든 문자열 패턴을 검색하라는 의미입니다.

   따라서 replace을 모든 문자열을 대상으로 실행하게 된 것입니다.

   

관련자료

댓글 0
등록된 댓글이 없습니다.
Today's proverb
“무릇 물이란 지세를 따라 흐르되 작은 틈도 놓치지 않고 적시니 지혜를 갖춘 자와 같고, 움직이면서 아래로 흘러가니 예를 갖춘 자와 같으며, 어떤 깊은 곳도 머뭇거리지 않고 들어가니 용기를 가진 자와 같고 장애물이 막혀서 갇히면 고요히 맑아지니 천명을 아는 자와 같으며, 험한 곳을 거쳐 멀리 흐르지만 끝내 남을 허물어뜨리는 법이 없으니 덕을 가진 자와 같다. 천지는 이것으로 이루어지고, 만물은 이것으로 살아가며, 나라는 이것으로 안녕을 얻고, 만사는 이것으로 평안해지며, 만물은 이것으로 바르게 되는 것이다. 이것이 지혜로운 자가 물을 좋아하는 이유이다.” (한영, <<한시외전>>)