[JS] replace()

문자열 치환/변환✍️

replace() : 문자열에서 특정 패턴을 찾아 해당 패턴을 다른 문자열로 대체하는 JavaScript의 문자열 메서드

string.replace(searchValue, newValue)

searchValue : 대체할 대상을 나타내는 패턴이나 문자열 (정규 표현식 or 일반 문자열)

newValue : 대체할 문자열

---

기본적으로는 아래처럼 문자열에서 첫번째로 검색된 값을 변경해준다.

let str = "강아지, 고양이, 토끼";
let strRep = str.replace("고양이", "고슴도치");
console.log(strRep);
// 강아지, 고슴도치, 토끼

---

문자열에 중복된 값이 있더라도 첫 번째의 값만 변경해준다.

let str = "강아지, 고양이, 토끼, 고양이";
let strRep = str.replace("고양이", "고슴도치");
console.log(strRep);
// 강아지, 고슴도치, 토끼, 고양이

---

만약 동일한 값을 전부 변경하고 싶으면 그때 정규 표현식을 사용하면 된다!

• g (global) : all 모든 문자열을 변경
• i (ignore) : 영문 대소문자를 구분없이

let str = "강아지, 고양이, 토끼, 고양이";
let strRep = str.replace(/고양이/gi, "고슴도치");
console.log(strRep);
// 강아지, 고슴도치, 토끼, 고슴도치

---

ex) 개인적으로 텍스트 쪼갤 때 사용함

<h1 class="title">제목이지롱</h1>

const textWrapper = document.querySelector('.title');
textWrapper.innerHTML = textWrapper.textContent.replace(
  /./g,
"<span class='letter'>$&</span>"
);

1. textContent를 사용하여 선택한 요소의 텍스트 내용을 가져오고

2. 가져온 텍스트 내용에서 정규 표현식 /./g를 사용하여 모든 문자를 선택한다. 여기서 .는 임의의 문자를 나타내며, /g 플래그는 전역 검색을 나타낸다.

3. 선택된 각 문자에 대해, 해당 문자를 <span class='letter'>$&</span> 형식으로 대체한다.
   $&는 일치하는 문자열을 나타내는 특수한 대체 패턴이다.

4. 대체된 문자열을 다시 innerHTML에 할당하면 결과적으로, 각 문자는 <span class='letter'>[문자]</span> 형식으로 감싸져 표시된다.

<h1 class="title">
  <span class="letter">제</span>
  <span class="letter">목</span>
  <span class="letter">이</span>
  <span class="letter">지</span>
  <span class="letter">롱</span>
</h1>