목차
- replaceAll() 예제 - 지정 단어를 일괄 변경
- replaceAll() 정의
- replaceAll() 구문
- replaceAll() 예제 - 지정 문자를 일괄 변경
- replaceAll() 예제 - 정규표현식 패턴 일치 시, 일괄 변경
- replaceAll() 예제 - 자동 링크 함수
- replaceAll() 예제 - cf. 사용자정의 함수
replaceAll() 예제 - 지정 단어를 일괄 변경
<script>
const hz = '홈짱닷컴 (Homzzang.com) 관리자: 홈짱 (HOMZZANG)';
// 지정 문자와 일치 시 모두 변경
console.log(hz.replaceAll('홈짱', 'Homzzang'));
// 결과값: Homzzang닷컴 (Homzzang.com) 관리자: Homzzang (HOMZZANG)
// 지정 패턴과 일치 시 모두 변경
const regex = /Homzzang/ig;
console.log(hz.replaceAll(regex, 'homzzang'));
// 결과값: 홈짱닷컴 (homzzang.com) 관리자: 홈짱 (homzzang)
</script>
replaceAll() 정의
지정 (문자/단어/패턴)과 일치하는 모든 것을 새 문자열로 대체.
1.cf.
replace() 메서드 - 문자열 대체 (※ 일치하는 맨 처음 1개만)
2.
IE 제외한 주요 브라우저 모두 지원.
3.
패턴 관련 매뉴얼은 아래 MDN 매뉴얼 참고.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
replaceAll() 구문
※ 4가지 형태 가능
- replaceAll(regexp, newSubstr)
- replaceAll(regexp, replacerFunction)
- replaceAll(substr, newSubstr)
- replaceAll(substr, replacerFunction)
[매개변수]
regexp
정규표현식.
- 주의1 - 전역("g") 플래그 설정 필요. 미설정 시 에러 발생.
- 주의2 - 정규표현식을 따옴표로 감싸면 안 됨.
substr
일치하는 기존 문자열
newSubstr
대체할 새 서브문자열
replacerFunction
대체함수
[반환값]
일치하는 것들이 새 문자열로 바뀐 문자열 반환.
replaceAll() 예제 - 지정 문자를 일괄 변경
[예제1] - 소문자를 대문자로 변경
<script>
const hz = 'Homzzang'.replaceAll('z', 'Z');
console.log(hz); // 결과값: HomZZang
</script>
[예제2] - <br> 태그 제거
<div id="hz">홈짱닷컴<br>Homzzang.com<br>홈페이지 제작관리 강의</div>
<script>
hz.innerHTML = hz.innerHTML.replaceAll("<br>", " / ");
</script>
결과보기
replaceAll() 예제 - 정규표현식 패턴 일치 시, 일괄 변경
<script>
const hz = 'Homzzang'.replaceAll(/z/g, 'Z');
console.log(hz); // 결과값: HomZZang
</script>
PS1.
정규표현식을 따옴표로 감싼 경우 결과값: Homzzang (※ 대체 발생 X)
PS2.
정규표현식에 전역 플래그 "g" 안 붙인 경우 에러 메시지 내용.
TypeError: replaceAll must be called with a global RegExp
replaceAll() 예제 - 자동 링크 함수
<div id="hz">홈짱닷컴 https://homzzang.com</div>
<script>
function autoLink() {
noLink = this[arguments[0]].innerHTML.replaceAll('src="htt', 'src="htt*');
this[arguments[0]].innerHTML = noLink.replace(new RegExp("(http|https)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)", "gi"), "<a href='$1://$2' target='_blank'>$1://$2</a>").replaceAll('src="htt*', 'src="htt');
}
autoLink("hz");
</script>
비타주리 님 (220616) https://sir.kr/qa/464127
replaceAll() 예제 - cf. 사용자정의 함수
※ 문자열 대체만 되는 함수를 직접 제작해 사용 가능.
<script>
function replaceAll(str, searchStr, replaceStr) {
return str.split(searchStr).join(replaceStr);
}
const hz = replaceAll("홈짱닷컴 Homzzang.com", "z", "Z");
console.log(hz); // 홈짱닷컴 HomZZang.com
</script>
