JavaScript 정규식(Regular Expression)에서 수정자(modifier)는 선택적으로 사용할 수 있는 요소로, 대소문자를 구분하지 않는 검색이나 전역 검색처럼 다양한 매칭 방식을 가능하게 해줍니다. 특히 여러 개의 수정자를 조합하여 동시에 사용할 수도 있다는 점이 큰 장점입니다.
주요 정규식 수정자 종류
JavaScript에서 자주 사용되는 대표적인 수정자는 다음과 같습니다 −
| 수정자 | 설명 |
|---|---|
| g | 전역(global) 매칭을 활성화합니다. 첫 번째 일치 항목에서 멈추지 않고 문자열 내의 모든 일치 결과를 반환합니다. |
| i | 대소문자를 구분하지 않는(case-insensitive) 매칭을 활성화합니다. |
| m | 여러 줄(multiline) 매칭을 활성화합니다. 이 경우 ^와 $ 앵커가 각 줄의 시작과 끝에도 적용됩니다. |
예제 코드
다음은 세 가지 수정자(g, i, m)를 실제 문자열에 적용해 보는 예제입니다 −
<!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 {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Regular expression modifiers</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 see the modifiers operate on the above string
</h3>
<script>
let sampleEle=document.querySelector('.sample');
let resEle = document.querySelector('.result');
let str = '\nHello world. This is a beautiful world';
sampleEle.innerHTML =str;
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML += '/^Hello/m = ' + str.match(/^Hello/m) + '<br>';
resEle.innerHTML += '/world/g = ' + str.match(/world/g) + '<br>';
resEle.innerHTML += '/WORLD/i = ' + str.match(/WORLD/i) + '<br>';
});
</script>
</body>
</html>
코드 설명
/^Hello/m:m수정자 덕분에 문자열 전체의 시작이 아닌 각 줄의 시작을 기준으로 매칭하므로, 두 번째 줄에 있는 'Hello'도 찾아냅니다./world/g:g수정자로 인해 첫 번째 'world'에서 멈추지 않고 문자열에 포함된 모든 'world'를 배열로 반환합니다./WORLD/i:i수정자로 인해 대소문자를 구분하지 않으므로, 소문자로 작성된 'world'와도 일치합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다 −
'CLICK HERE' 버튼을 클릭하면 각 수정자가 적용된 매칭 결과가 아래와 같이 표시됩니다 −
