티스토리 뷰

자바스크립트에서는 replaceAll이 없다. 그래서 다른 방법으로 사용해야한다.


1. 기존 replace

var str = "TEST : Sample TEST text";
var replaceStr = str.replace("TEST","Test"); // TEST라는 텍스트를 Test으로 변경
console.log("replaceStr : ", replaceStr);

- 결과값

replaceStr :  Test : Sample TEST text


- 첫번째 조건만 변경하고 멈춘다.


2. replaceAll 사용하기

1) string prototype 메소드 추가해서 사용하기

 - searchStr을 구분자로 분리(split)한 다음, replacement라는 연결자로 연결(join)하는 형태

/**
* String prototype replaceAll 추가
* - searchStr을 구분자로 분리(split)한 다음, replacement라는 연결자로 연결(join)하는 형태
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
*/
String.prototype.replaceAll = function(searchStr, replacement) {
return this.split(searchStr).join(replacement);
}

var protoTypeTestStr = "TEST : Sample TEST text";
var protoTypeTestRtnStr = protoTypeTestStr.replaceAll("TEST", "Test");
console.log("protoTypeTestRtnStr : ", protoTypeTestRtnStr);

- 결과값

protoTypeTestRtnStr :  Test : Sample Test text


2) 정규식을 활용

 - 변경하려는 값과 같은 것만(g 값을 사용)

var regexTestStr = "TEST : Sample TEST text";
var regexTestRtnStr = regexTestStr.replace(new RegExp("TEST", "g"), "Test");
console.log("regexTestRtnStr : ", regexTestRtnStr);

- 대소문자 구분 없이 처리(gi 값 사용)

var regexTestTipStr = "test : Sample test text";
var regexTestTipRtnStr = regexTestTipStr.replace(new RegExp("TEST", "gi"), "Test");
console.log("regexTestTipRtnStr : ", regexTestTipRtnStr);



3. 실제 사용하는 방법

1) String prototype으로 추가

/**
* String prototype replaceAll 추가
* - 정규식으로 replaceAll 구현
* - ignoreCasetrue이면 대소문자 구분없이 변경한다.
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
* @param ignoreCase(boolean) : 대소문자 구분여부
*/
String.prototype.rexReplaceAll = function(searchStr, replacement, ignoreCase) {
return this.replace(new RegExp(searchStr, ignoreCase ? "gi" : "g"), replacement);
}


2) 실행

 - 소스

var regexProtoTestStr = "test : Sample test text";
var regexProtoTestRtnStr = regexProtoTestStr.rexReplaceAll("TEST", "Test", true);
console.log("regexProtoTestRtnStr : ", regexProtoTestRtnStr);

- 결과

regexProtoTestRtnStr :  Test : Sample Test text



4. 전체소스

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JAVASCRIPT replaceAll 구현하기</title>
</head>
<body>
<script>
/* 자바스크립트 기본 replace 테스트 */
var oriReplaceTestStr = "TEST : Sample TEST text";
var oriReplaceRtnStr = oriReplaceTestStr.replace("TEST","Test"); // TEST라는 텍스트를 Test으로 변경
console.log("oriReplaceRtnStr : ", oriReplaceRtnStr);

/**
* String prototype replaceAll 추가
* - searchStr을 구분자로 분리(split)한 다음, replacement라는 연결자로 연결(join)하는 형태
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
*/
String.prototype.replaceAll = function(searchStr, replacement) {
return this.split(searchStr).join(replacement);
}

var protoTypeTestStr = "TEST : Sample TEST text";
var protoTypeTestRtnStr = protoTypeTestStr.replaceAll("TEST", "Test");
console.log("protoTypeTestRtnStr : ", protoTypeTestRtnStr);

var regexTestStr = "TEST : Sample TEST text";
var regexTestRtnStr = regexTestStr.replace(new RegExp("TEST", "g"), "Test");
console.log("regexTestRtnStr : ", regexTestRtnStr);

/** TIP : 대소문자 구분없이 처리 **/
var regexTestTipStr = "test : Sample test text";
var regexTestTipRtnStr = regexTestTipStr.replace(new RegExp("TEST", "gi"), "Test");
console.log("regexTestTipRtnStr : ", regexTestTipRtnStr);

/**
* String prototype replaceAll 추가
* - 정규식으로 replaceAll 구현
* - ignoreCasetrue이면 대소문자 구분없이 변경한다.
*
* @param searchStr : 바꾸려는 String
* @param replacement : 바꾸어질 String
* @param ignoreCase(boolean) : 대소문자 구분여부
*/
String.prototype.rexReplaceAll = function(searchStr, replacement, ignoreCase) {
return this.replace(new RegExp(searchStr, ignoreCase ? "gi" : "g"), replacement);
}

var regexProtoTestStr = "test : Sample test text";
var regexProtoTestRtnStr = regexProtoTestStr.rexReplaceAll("TEST", "Test", true);
console.log("regexProtoTestRtnStr : ", regexProtoTestRtnStr);
</script>
</body>
</html>


5. TIP

1) 정규식 추가

 - m을 추가하면 여러줄에 대해서도 처리가 가능하다.

댓글
댓글쓰기 폼
공지사항
최근에 달린 댓글
Total
15,981
Today
12
Yesterday
18
«   2018/05   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함