Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript RegExp 객체란? – 정규 표현식으로 텍스트 패턴 매칭하기

JavaScript RegExp 객체란 무엇인가?

RegExp 객체는 문자열 안에서 특정 패턴을 검색하고, 일치하는 텍스트 부분을 추출하는 데 사용되는 JavaScript의 내장 객체입니다. 이메일 형식 검증, 특정 단어 찾기, 입력값 유효성 확인 등 실무에서 폭넓게 활용됩니다.

RegExp 객체는 다음 두 가지 방식으로 생성할 수 있습니다.

  • 정규식 생성자(Constructor) : new RegExp("world")
  • 리터럴(Literal) 문법 : /world/

JavaScript RegExp 객체 예제 코드

다음은 RegExp 객체를 사용해 문자열에서 'world'라는 단어를 검색하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,
   .sample {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>RegExp object</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to test the regex expression</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resEle = document.querySelector(".result");
   let str = "Hello world. This is a beautiful world";
   sampleEle.innerHTML = str;
   let pattern = new RegExp("world");
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML += "pattern.test(str) = " + pattern.test(str) + "<br>";
      resEle.innerHTML += "pattern.exec(str) = " + pattern.exec(str) + "<br>";
   });
</script>
</body>
</html>

실행 결과

페이지를 처음 열면 아래와 같이 검색 대상 문자열이 화면에 표시됩니다.

JavaScript RegExp 객체란? – 정규 표현식으로 텍스트 패턴 매칭하기

'CLICK HERE' 버튼을 클릭하면 정규식 검사 결과가 다음과 같이 출력됩니다.

JavaScript RegExp 객체란? – 정규 표현식으로 텍스트 패턴 매칭하기

핵심 메서드 정리

위 예제에서 사용된 RegExp 객체의 대표적인 메서드는 다음과 같습니다.

  • test() : 문자열에 패턴과 일치하는 부분이 존재하면 true, 존재하지 않으면 false를 반환합니다.
  • exec() : 패턴과 일치하는 첫 번째 문자열을 반환하며, 일치하는 항목이 없으면 null을 반환합니다.

예제에서 사용된 문자열 "Hello world. This is a beautiful world"에는 'world'라는 단어가 포함되어 있으므로, pattern.test(str)true를 반환하고 pattern.exec(str)world를 반환합니다.