본문 바로가기
JavaScript

replace() / replaceAll() 메서드

by 코린이 박원장👶 2022. 8. 17.

replace() / replaceAll()

어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.


■ 문법

원문은 'String.prototype.replace()'이나 String.prototype은 생략이 가능합니다.
replaceAll의 문법또한 repalce와 같습니다.

"문자열".replace("찾을 문자열", "변경할 문자열")
"문자열".replace(정규식)
"문자열".replace(정규식, 변경할 문자열)

■ 특징

▶ 기존 replace()메서드는 중복된 문자의 경우 중복문자 중 첫번째 문자만 바꾸어준다는 특징이 있었습니다. 이러한 문제점을 개선해서 나온 따끈한 신상이 repalceAll()메서드 인것입니다. 이 메서드의 경우 중복이 되어도 전부 다 바꿔줍니다.

■ 예시

이해를 돕기 위해 예시를 들어봅시다. 주석으로 결과값을 작성하였습니다.
기존에는 정규식표현을 사용했으나 repalceAll의 등장으로 한결 코드작성이 수월해진 모습입니다.

const str1 = "javascript reference";
const currentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference
const currentStr2 = str1.replace("j", "J"); //Javascript reference
const currentStr3 = str1.replace("e", "E"); //javascript rEference : 중복된것은 첫번째만 바뀜
const currentStr4 = str1.replaceAll("e","E");   //javascript rEfErEncE : 중복된것도 다 바뀜
const currentStr5 = str1.replace(/e/g,"E");   //javascript rEfErEncE : All이 나오기 이전까진 이렇게 정규식 사용함.g는 여러개(=all)
const currentStr6 = str1.replace(/e/gi,"E");   //javascript rEfErEncE : i는 소대문자 구분없이 찾아줌.

const str2 = "https://www.naver.com/img01.jpg";
// const currentStr7 = str2.replace(1, 2); //이렇게 해도되지만 이러면 오류날 가능성 多
const currentStr7 = str2.replace("img01.jpg", "img02.jpg"); 

const str3 = "010-2000-1000";
const currentStr8 = str3.replace("-","");       //0102000-1000
const currentStr9 = str3.replaceAll("-","");    //01020001000
const currentStr10 = str3.replace(/-/g,"");     //01020001000
const currentStr11 = str3.replace(/-/g," ");    //010 2000 1000
const currentStr12 = str3.replace(/-/g,"*");    //010*2000*1000
const currentStr13 = str3.replace(/[1-9]/g,"*");    //0*0-*000-*000 : [0-9]:0부터9까지의 숫자 검색
728x90

'JavaScript' 카테고리의 다른 글

repeat()메서드  (6) 2022.08.17
concat() 메서드  (4) 2022.08.17
split() 메서드  (4) 2022.08.17
소/대문자메서드, 공백제거 메서드  (4) 2022.08.17
문자열 결합 / 템플릿 문자열  (4) 2022.08.17

댓글


HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지