본문 바로가기
Developer/JavaScript

JavaScript replace, replaceAll (문자열 전체 변경) 정말 간단

by 김씩씩 2020. 7. 10.

JavaScript replace, replaceAll (문자열 전체 변경)

JavaScript에서는 replaceAll 이라는 함수가 존재하지 않습니다.

하지만 많은 분들이 replaceAll 즉 하나가 아닌 여러개의 문자열을 변경하는 방법을 찾으실 겁니다.

JavaScript에서 문자열을 변경할 때 사용하는 함수인 replace와

그 replace 함수를 replaceAll과 같이 사용할 수 있는 방법에 대해 알려드리도록 하겠습니다.

 

다들 아시겠지만 JavaScript replace 함수 사용 방법

{{문자열}}.replace({{변경할 문자열 패턴}}, {{새 문자열}});

입니다.

 

하나만 바뀌는 원래 replace의 예시를 보여드리도록 하겠습니다.

코드

var testString = "안녕? 안녕! 안녕.";
var result = testString.replace("안녕", "하이");
console.log(result);

결과

원래 문자열인

"안녕? 안녕! 안녕."

에서

"하이? 안녕! 안녕." 으로 "안녕"이 하나만 변경되었습니다.

 

하지만 우리가 원하는 결과는 하나가 아닌 모두 변경하는 replaceAll과 같은

"하이? 하이! 하이." 입니다.

 

replaceAll 처럼 사용하는 결과 예시입니다.

코드

var testString = "안녕? 안녕! 안녕.";
var result = testString.replace(/안녕/g, "하이");	// "안녕" 을 모두 찾아 "하이"로 변경
console.log(result);

결과

이 전 예시와 다르게 "안녕" 이라는 문자열이 하나만 변경되는 것이 아니라

세개의 "안녕" 문자열이 모두 "하이" 문자열로 변경되었습니다!

 

예시를 하나 더 보여드리겠습니다.

var testString = "Your PC, Your monitor, Your keyboard, Your mouse.";
var result = testString.replace(/Your/g, "My");	// "Your"을 모두 찾아 "My"로 변경
console.log(result);

결과

원래 문자열인 

"Your PC, Your monitor, Your keyboard, Your mouse."

에서

문자열 "Your"을 모두 찾아 "My"로 변경하여

"My PC, My monitor, My keyboard, My mouse."

로 변경되었습니다.

 

코드에서 보면 알 수 있듯이 이렇게 정규식을 사용하여 주셔야 합니다.

정규식 형식으로

두개의 / 안에 원하는 문자열을 입력해주시고

뒤에 플래그g를 삽입해 주시면 됩니다.

여기서 사용된 g 의 의미

발생할 모든 패턴에 대한 전체 검색 이라고 보시면 될 것 같습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

 

감사합니다.


댓글