필자가 아는 replaceall(string to string) 할 수 있는 방법은 아래 3가자로 추려 볼 수 있다.

아래 방법중 가장 빠른 처리 속도를 내는 방법은 무었을까? 브라우저 별로 조사해 보았다.

 

방법 1 ) split&join을 이용하는 방법

·미리보기 | 소스복사·
 
  1. view plaincopy to clipboardprint?   
  2. TestString.split("oldword").join("newword");     
  3. TestString.split("oldword").join("newword");  

방법 2 ) 정규식을 이용한 방법

·미리보기 | 소스복사·
 
  1. view plaincopy to clipboardprint?   
  2. TestString.replace(new RegExp("oldword", "gi"), "newword");     
  3. TestString.replace(new RegExp("oldword", "gi"), "newword");  

 방법 3 ) 루프문을 이용한 방법

·미리보기 | 소스복사·
 
  1. view plaincopy to clipboardprint?   
  2. function roopfunc (s, findStr, newStr){      
  3.     var tmpStr = s;      
  4.     while(tmpStr.indexOf(findStr) != -1) tmpStr = tmpStr.replace(findStr, newStr);                    
  5.     return tmpStr;      
  6. }     
  7. function roopfunc (s, findStr, newStr){   
  8.  var tmpStr = s;   
  9.  while(tmpStr.indexOf(findStr) != -1) tmpStr = tmpStr.replace(findStr, newStr);       
  10.  return tmpStr;   
  11. }  

비교 방법은 5,655,000 개의 문자열을 두개의 다른 문자로 치환하는 방법으로 했다.

3가지 방법 모두를 IE6, Safari, FF3, Chrome 에서 조사 했다.

결과를 보면,

방법 3의 while 문을 이용한 방법은 모든 부라우저에서 테스트 할수 없었다.

모두 다운 되버렸다.

FF의 firebug에서는 out of memory라는 오류 메시지를 뿌려주었다.

그러므로 쓰면 안되는 방법인것이다.

방법2의 정규식을 이용한 방법은 특이하게 IE에서만 좋은 성능을 발휘했다. 

IE외에 브라우저 특히 Safari 에서는 성능이 확연하게 떨어졌다. 

파이어폭스만 그나마 나은 성능을 보여주고 있다.

방법1은 IE를 제외한 브라우저에서 모두 최고의 성능을 발휘했다.

특히 Chrome 의 경우는 다른 브라우저들에 비해 최고의 빠른 속도를 보여줬다. 

필자의 결론, 

위 각 브라우저의 성능을 테스트해본 결과 방법 1의 split&join을 이용하는 방법이 정규식을 이용한 치환방법보다 좋으나, IE의 서비스 점유율을 볼때 IE에서 최적의 성능을 보이는 방법 2의 정규식을 이용한 방법을 무시 할수는 없다.

그러므로, 개발자가 할수 있는 가장 좋은 방법은 IE때만 정규식을 치환하는 방법을 사용하고 나머지는 모두 split&join을 이용하는 방법으로 구현하는것이 최선의 방법이 아닐까 한다.

 

번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894