본문 바로가기
프로그래밍/HTML, CSS, JavaScript

자바스크립트 replace 문자 모두 바꾸기 - 예제/실습

by [바가지] 2018. 9. 28.
반응형

자바스크립트 replace all

 

 

자바스크립트 함수에는 특정문자를 바꾸는 기능을 하는 replace라는 함수가 있습니다.

그러나 이 함수는 특정문자에 대하여 단 한번만 변경하게 됩니다.

그렇다면 특정문자를 모두 변경 하고자 할 때 어떻게 하면 되는지 알아 보도록 하겠습니다.

예를 들어 콤마를 모두 제거하고 싶거나 특정문자를 다른 문자로 모두 변경하고자 할 때 입니다.

 

■ 한번만 변경하게 되는 기본 사용방법

문자열.replace("변경 할 문자", "변경 될 문자");

 

예제> "aaaa".replace("aa", "bb");

결과> "aabb" 

 

특정문자 모두 바꾸기

문자열.replace(/변경 할 문자/g, "변경 될 문자");

 

예제> "aaaa".replace(/aa/g, "bb");

결과> "bbbb" 

 

숫자만 남기기(콤마제거 및 모든 문자 제거)

aaaa".replace(/[^\d]+/g, "");

 

예제> "12,343,132".replace(/[^\d]+/g, "");

결과> "12343132" 

 

 

최종예제

- 아래 예제는 변수를 활용한 replace 예제 입니다. 또한 gi에서 g는 all 그리고 i 는 대소문자 구분을 없애는 옵션이 됩니다.

 

▶ 변경 전(문자열 입력) : <input type="text" id="str1" style="width:200px;">
- 변경 할 문자 : <input type="text" id="str2" style="width:50px;">
- 변경 될 문자 : <input type="text" id="str3" style="width:50px;">
<input type="button" value="적용" onClick="apply()">
▶ 변경 후 : <input type="text" id="str4" style="width:200px;">

 

최종예제 결과

자바스크립트 replace 실습 결과

 

최종예제 실습

- 정보를 입력하여 적용 버튼을 클릭 해 보면 문자가 변경 된 결과 값을 확인 할 수 있습니다.

▶ 변경 전(문자열 입력) :
    - 변경 할 문자 :   - 변경 될 문자 :  
▶ 변경 후 :

 

반응형