JavaScript의 source 속성은 정규식(RegExp) 객체에 담긴 패턴 텍스트를 그대로 문자열로 반환하는 기능입니다. 즉, 플래그(g, i, m 등)나 슬래시(/)를 제외한 순수한 정규 표현식 본문만을 확인할 수 있어, 디버깅이나 동적 정규식 생성 시 매우 유용합니다.
source 속성의 주요 특징
RegExp.prototype.source는 다음과 같은 특징을 가집니다.
- 정규식 리터럴 또는 RegExp 생성자로 만든 객체에서 모두 사용할 수 있습니다.
- 반환값은 항상 문자열(String) 타입입니다.
- 슬래시와 플래그는 포함되지 않고 오직 패턴 자체만 반환됩니다.
예제 코드
아래 예제는 버튼을 클릭하면 /ing/gi 패턴의 소스 텍스트를 화면에 출력합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript source 속성</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript source 속성</h1>
<div class="sample">The king bought a ring</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 정규식의 소스 텍스트를 확인할 수 있습니다
</h3>
<script>
let resultEle = document.querySelector(".result");
let pattern = /ing/gi;
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = "Regexp text = " + pattern.source;
});
</script>
</body>
</html>실행 결과
페이지를 처음 열면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 Regexp text = ing가 출력됩니다. 플래그인 g(전역 검색)와 i(대소문자 무시)는 제외되고 패턴인 ing만 반환된 것을 확인할 수 있습니다.
활용 팁
source 속성은 새로운 RegExp 객체를 동적으로 생성할 때 특히 유용합니다. 예를 들어 기존 패턴은 유지하면서 플래그만 변경하고 싶다면 new RegExp(pattern.source, 'i')처럼 활용할 수 있습니다. 또한 사용자에게 현재 적용 중인 검색 패턴을 보여줘야 하는 UI를 만들 때도 유용하게 쓰입니다.