[javaScript]문자열 내용 변경 replace()

replace()

replace()메서드는 지정된 값을 다른 문자열의 값으로 변경해준다.

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

실행결과

Please visit W3Schools!

 

문자열 값.replace("문자열 값에 변경할 문자", "첫 번째 매개변수에 지정된 문자를 대체할 값")

 

---

 

 

replace() 메서드 특징

• replace()메서드는 호출된 문자열을 변경하는게 아니고 새로운 문자열을 반환한다.
• 기본적으로 첫 번재 일치 항복만 변경한다.
• 대소문자를 구분한다.

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

실행결과

Please visit W3Schools and Microsoft!

여러개일 경우 제일 처음 일치된 항목만 변경되는걸 확인할 수 있다.

 

 

replace()정규식

• g : 문자열 내의 모든 패턴 체크
• i : 대소문자 구별 하지 않음
• m : 여러줄에 걸쳐서 체크

 

만약 모든 일치 항목을 변경하고 싶다면  /g 정규식을 사용한다.

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/Microsoft/g,"W3Schools");
}
</script>

실행결과

Please visit W3Schools and W3Schools!

 

 

 

대소문자 구분하지 않고 사용할 경우 /i 정규식 사용

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/MICROSOFT/i,"W3Schools");
}
</script>

실행결과

Please visit W3Schools!

 

 

만약 대소문자를 구분하면서 모든 패턴에 대해 치환할 경우에는 gi 이렇게 사용한다.

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/MICROSOFT/gi, "W3Schools");

 

 

 

 

참고 : https://www.w3schools.com/js/js_string_methods.asp