Javascript replace 함수 기본 사용법과 예제, 다양한 활용

 

 

 

 

Javascript : replace함수의 사용법, 예제, 다양한 활용

 

 

 

자바스크립트 replace

 

 

자바스크립트에서 replace 함수는 문자열에서 특정 패턴을 찾아 다른 문자열로 바꾸어주는 데 사용됩니다. 이 함수를 제대로 활용하면 문자열 처리를 더욱 고급지게 활용할 수 있습니다. 이 글을 통해 replace 함수의 활용법과 다양한 활용 예시들을 다뤄보면  보다 친숙하게 느끼실 것이라고 기대됩니다. 함께 replace 함수의 매력을 발견해보는 재미있는 여정이 되어 보실까요?

 

 

 

 

replace 기본 사용법

replace 함수는 두 가지 인수를 받습니다.

1. 교체할 부분(문자열 또는 정규식)
2. 교체할 새로운 문자열

replace 함수의 문법은 다음을 참고해 주세요.

string.replace(searchValue, newValue)

 

• searchValue: 교체할 부분을 나타내는 문자열 또는 정규식
• newValue: 교체할 새로운 문자열

 

728x90

기본 문자열 교체 예제

 

let str = "Hi, Bro!";
let newStr = str.replace("Bro", "JavaScript");
console.log(newStr); // "Hi, JavaScript!"

 

'Hi, Bro!'를 저장하고 있는 str 변수에서 'Bro'라는 문자열을 찾아서 'JavaScript'로 바꾸어줍니다.

 

정규식을 사용한 문자열 교체 예제

정규식을 사용하면 문자열 내에서 특정 패턴을 찾아서 교체할 수 있습니다. 플래그를 사용하면 문자열 내 모든 일치 항목을 교체할 수도 있습니다.

 

예제 1 : 모든 'dog'을 'cat'으로 교체

let str = "The dgo sat on the dog mat.";
let newStr = str.replace(/dog/g, "cat");
console.log(newStr); // "The cat sat on the cat mat."

 

 

 

예제 2 : 전화번호 형식 교체

'010-1234-5678' 형식의 전화번호 뒤 4자리를 *로 교체

let phoneNumber = "010-1234-5678";
let newPhoneNumber = phoneNumber.replace(/(\d{3})-(\d{4})-(\d{4})/, "$1-$2-****");
console.log(newPhoneNumber); // "010-1234-****"

개인정보보호 조치로 자주 사용되는 정규식 문자열 교체 방법입니다.

 

 

 

예제3 : 이메일 주소 형식 교체

3-1) 이메일 주소에서 도메인 부분을 *로 마스킹

let email = "mymail@mydomain.com";
let newEmail = email.replace(/(.+)@(.+)/, "$1@*****");
console.log(newEmail); // "mymail@*****"

이 역시 전화번호 일부분을 마스킹처리하는 것과 동일하게 개인정보보호 조치로 많이 활용합니다.

 

3-2) 이메일 주소에서 아이디의 일부분만 보이게 처리

function maskEmail(email) {
      return email.replace(/(\w)(\w+)(@.*)/, (match, p1, p2, p3) => {
          // p1은 첫 글자, p2는 첫 글자 이후의 모든 문자, p3는 @ 이후의 문자열
          let stars = '*'.repeat(p2.length);
          return p1 + stars + p3;
      });
  }

  // 테스트용 예제
  document.addEventListener("DOMContentLoaded", () => {
      let email = "user@example.com";
      let maskedEmail = maskEmail(email);
      console.log(maskedEmail); // "u***@example.com"
           
  });

 

 

 

예제4 : HTML 태그 제거

문자열에서 모든 HTML 태그를 제거

let htmlString = "<p>이 코드는 <strong>테스트</strong>입니다.</p>";
let textOnly = htmlString.replace(/<\/?[^>]+(>|$)/g, "");
console.log(textOnly); // "이 코드는 테스트입니다."

웹사이트 보안강화 조치로 활용될 수 있습니다.

 

 

 

예제5 : 주민번호 뒤 7자리 마스킹

주민번호에서 뒤의 7자리 숫자를 모두 *로 교체

let ssn = "123456-1234567";
let maskedSsn = ssn.replace(/(\d{6})-(\d{7})/, "$1-*******");
console.log(maskedSsn); // "123456-*******"

가장 민감한 개인정보인 주민번호 뒷자리를 *로 바꿔줍니다.

 

 

 

예제6 : 특수문자 제거

유효하지 않은 특수문자를 제거

let input = "Hello@#World!!";
let cleanInput = input.replace(/[^a-zA-Z0-9 ]/g, "");
console.log(cleanInput); // "HelloWorld"