새소식

FE/JavaScript

[Javascript] replace(), replaceAll() - 문자열의 일부 문자 치환하기

  • -

replace()와 replaceAll()

replace()와 replaceAll() 함수는 모두 자바스크립트에서 문자열의 특정한 문자 또는 문자열을 치환하는 함수이다.

  • replace()는 조건 대상이 되는 첫 번째 문자 하나만 변경되어서 반환한다.
const message = "Hello Hello world!";

// "Happy Hello world!"
document.write(message.replace("Hello", "Happy"));

 

* replace()함수는 전달받은 문자를 수정하는 것이 아니라, 새로운 값을 만들어 '반환'한다 (기존의 문자는 그대로 존재)

 

 

  • replaceAll()은 조건 대상이 되는 모든 문자를 만들어 반환한다.
const message = "Hello Hello world!";

// "Happy Happy world!"
document.write(message.replaceAll("Hello", "Happy"));

 

 

 replaceAll() 함수는 2021년 스펙을 기준으로 추가된 함수이므로, 최신 개발 환경이 아니라면 사용할 수가 없다.

따라서, replaceAll() 함수는 사실상 없다고 생각하는게 좋다.

 

 

정규표현식을 활용해 replace() 를 replaceAll() 처럼 활용하기

 정규 표현식이란?
 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리할 수 있도록 하는 수단이다.

 

 

정규식 설명
g 모든 패턴에 대한 전역 검색
i 대/소문자 구분 없음
m 여러 줄 검색

 

예제)

str.replace("@",""); // 첫번째 @ 를 공백으로 변경

str.replace(/@/gi,""); 
// @ 를 슬래시로 감싼뒤에 gi를 붙이면 전체 @ 를 공백으로 변경 replaceAll과 같은 결과를 볼수 있다.

// 슬래시 "/" 사용시에는 이스케이프 문자 "\" 를 붙여서 사용한다.
str.replace(/\//gi,"");

 

 

Reference

https://yunamom.tistory.com/251

 

[JS] replace, replaceAll 사용방법

안녕하세요 yunamom 입니다 :D 이번시간에는 자바스크립트에서 문자를 치환하는 replace()함수에 대하여 포스팅하겠습니다.😊 ✨replace(), replaceAll() 함수 자바스크립트에서 문자열의 특정한 문자 또

yunamom.tistory.com

 

Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.