JavaScript 정규식으로 문자열 안에서 여러 개의 일치 항목을 모두 찾으려면 정규식 끝에 전역(g) 플래그를 붙이고, exec() 메서드를 반복해서 호출하면 됩니다.
아래 예제는 URL의 쿼리 문자열에서 동일한 매개변수(demo)가 여러 번 등장할 때, 해당 값들을 모두 추출하여 배열에 담는 방법을 보여줍니다.
예제
<html>
<head>
<script>
var url = 'https://www.example.com/new.html?ui=7&demo=one&demo=two&demo=three four',
a = document.createElement('a');
a.href = url;
var demoRegex = /(?:^|[&;])demo=([^&;]+)/g,
matches,
demo = [];
while (matches = demoRegex.exec(a.search)) {
demo.push(decodeURIComponent(matches[1]));
}
document.write(demo);
</script>
</head>
<body>
</body>
</html>
코드 설명
1. 전역(g) 플래그: 정규식 뒤에 /g를 붙이면 첫 번째 일치에서 멈추지 않고 문자열 전체를 대상으로 검색합니다. 이 플래그가 없으면 exec()는 항상 첫 번째 일치만 반환합니다.
2. exec() 반복 호출: g 플래그가 설정된 정규식 객체는 내부적으로 검색 위치(lastIndex)를 기억하므로, while 루프에서 exec()를 계속 호출하면 일치 항목을 하나씩 순서대로 얻을 수 있습니다. 더 이상 일치하지 않으면 null을 반환하며 루프가 종료됩니다.
3. decodeURIComponent(): URL 인코딩된 값(예: 공백이 %20으로 표현됨)을 사람이 읽을 수 있는 형태로 디코딩합니다.
실행 결과
one,two,three four
대안: match() 메서드 사용
단순히 일치하는 문자열만 필요하다면 String.prototype.match() 메서드에 g 플래그가 설정된 정규식을 넘기는 방법도 있습니다. 이 경우 모든 일치 항목이 배열로 한 번에 반환됩니다.
const results = a.search.match(/demo=[^&;]+/g); console.log(results); // ["demo=one", "demo=two", "demo=three four"]