정규 표현식이란?
정규 표현식(Regular Expression, 줄여서 RegExp 또는 Regex)은 검색 패턴을 설명하는 일련의 문자입니다. 이 패턴을 활용하면 긴 텍스트 안에서 원하는 문자열을 손쉽게 찾거나, 특정 패턴에 맞는 내용을 다른 문자열로 치환할 수 있습니다.
예를 들어 전화번호, 이메일 주소처럼 형식이 정해진 문자열을 검증하거나, 문장 속에서 특정 단어를 모두 찾아 바꾸는 작업에 정규 표현식이 널리 사용됩니다.
자바스크립트 정규 표현식 예제
다음은 자바스크립트에서 정규 표현식을 사용해 문장 속의 'king'이라는 단어를 'queen'으로 교체하는 코드입니다.
<!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;
}
.sample,.result{
font-size: 18px;
font-weight: 500;
color:red;
}
</style>
</head>
<body>
<h1>JavaScript Regular Expressions</h1>
<div class="sample">The king bought the ring and went to the palace.</div>
<div style='color:black' class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to replace king with queen in the text above
</h3>
<script>
let sampleEle = document.querySelector('.sample');
let resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click',()=>{
let newText = sampleEle.innerHTML.replace(/king/gi,'queen');
resultEle.innerHTML = 'Result = ' + newText;
})
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 정규 표현식에 의해 'king'이 'queen'으로 치환된 결과가 표시됩니다.
핵심 포인트: 플래그(flag) 이해하기
예제에서 사용된 /king/gi는 슬래시(/) 사이에 검색할 패턴을 넣고, 뒤에 옵션인 플래그를 붙인 형태입니다.
- g (global): 문자열에서 패턴과 일치하는 모든 항목을 대상으로 합니다. 이 플래그가 없으면 첫 번째로 일치하는 항목 하나만 처리됩니다.
- i (ignore case): 대소문자를 구분하지 않습니다. 따라서 'King', 'KING' 같은 표기도 함께 매칭됩니다.
이처럼 자바스크립트의 replace() 메서드와 정규 표현식을 조합하면 복잡한 문자열 치환 작업도 간결하게 처리할 수 있습니다. 그 외에도 test(), match(), search() 등 다양한 메서드가 정규 표현식과 함께 사용되므로, 기본 문법을 익혀두면 문자열 처리 작업이 한층 수월해집니다.