[정규표현식]최상단에 있는 div태그 선택하기 | greedy and lazy quantifiers

문제

<div class="outer container" id="123421">
	<div class="inner">
		<p>붐붐붐내심장이뛰네</p>
	</div>
	<div class="sibling">
		<p>붐붐게리라익붐</p>
	</div>
</div>

위의 HTML에서 최상위 div 태그를 선택하려면 어떤 정규식을 써야 할까? 하위에 있는 자식 태그를 제외한 div태그의 여는 부분과 닫는 부분 만을 선택해야 한다.

 

아래의 사이트에서 정규식을 쉽게 테스트해볼 수 있다.

https://regexr.com/

챗지피티에게 마구마구 물어봐버리기

chatGPT에게 물어보니 다음과 같은 정규식을 뱉어냈다.

/^<div.*?>|<\\/div>$/g

그런데 * 뒤에 ? 는 뭘까?

?를 없애도 테스트할 때는 같은 결과가 나오는 듯했다.

그러나 개행이 없다면 결과가 달라진다.

Greedy and lazy quantifiers

우리가 방금 봤던 물음표는 lazy quantifier라고 한다.

정규표현식에서 quantifier(수량자)는 일치하는 인스턴스의 개수를 정한다.

quantifier는 greedy와 lazy로 나뉘는데 greedy가 default라고 한다.

https://learn.microsoft.com/en-us/dotnet/standard/base-types/quantifiers-in-regular-expressions

Quantifiers in Regular Expressions

.* 는 모든 문자. 에 대해 0개 이상*을 찾는데, greedy 알고리즘처럼 현재 상황에서 최대한 많은 범위를 우선적으로 탐색한다.

처음 문제로 돌아가 보면 ^<div.*>는 맨 처음 <div를 찾고 모든 문자가 0개 이상.*이므로 맨 마지막의 >를 찾기 전까지의 모든 문자를 포함시킨다.

아래의 링크에 그림, 예제와 함께 잘 설명되어있으니 참고하시길 바란다.

Greedy and lazy quantifiers

Greedy and lazy quantifiers

다른 방식 : [^...]으로 버리기

가장 처음에 있는 여는 div태그<div를 찾고 여는 태그의 닫힘 꺽쇠>가 아닌 문자들을 닫힘 꺽쇠가 처음 나올 때까지 포함시켜 여는 태그를 찾는다. 그리고 맨 뒤에 있는 닫는 div태그 </div> 를 찾는다.

/^<div[^>]*>|<\\/div>$/g