[JavaScript & Jquery] 정규식 인수를 이용하여 replace() 및 replaceWith() 사용하기

JavaScript 및 jQuery에서 replace() 및 replaceWith() 함수는 정규식을 인수로 허용하여 보다 유연하고 강력한 문자열 조작을 허용합니다.

 

JavaScript에서 정규식은 패턴을 슬래시 /.../로 묶어서 표시합니다. g 플래그는 문자열에서 패턴의 모든 항목을 대체하는 전역 검색을 나타내는 데 사용할 수도 있습니다. 예를 들면 다음과 같습니다.

 

let str = "The quick brown fox jumps over the lazy dog";
let newStr = str.replace(/the/g, "a");
console.log(newStr); // Output: "A quick brown fox jumps over a lazy dog"

이 예에서 정규식 /the/g는 문자열에서 하위 문자열 "the"(대소문자 구분)의 모든 항목을 검색하고 문자 "a"로 바꾸는 데 사용됩니다. 결과 문자열은 "A quick brown fox jumps over a lazy dog"입니다.


jQuery에서 HTML 요소나 콘텐츠를 대체하기 위해 replaceWith() 함수와 함께 정규 표현식을 사용할 수도 있습니다. 예를 들면 다음과 같습니다.

 

$("p").replaceWith(function() {
  return $(this).html().replace(/apple/gi, "<strong>$&</strong>");
});

이 예에서 replace() 함수는 replaceWith() 함수 내부에서 사용되어 페이지의 각 <p> 요소에서 "apple"(대소문자 구분 안 함)이라는 단어가 나오는 모든 항목을 검색합니다. <strong> 요소로 래핑합니다. 결과 HTML 코드에는 <strong> 태그로 묶인 "apple"의 모든 인스턴스가 있습니다.


대체 문자열의 $& 기호는 패턴과 일치하는 원래 텍스트를 보존하는 데 사용되는 정규식 패턴에서 일치하는 하위 문자열을 나타냅니다.

 

자, 이제 replace 와 replaceWith 이용하여 문자열을 마음껏 바꿔봅시다.