XHTML 문서에 자바스크립트를 삽입할 때 XML 파서와의 호환성을 위해 <![CDATA[ 블록이 사용되는 경우가 많습니다. 하지만 이러한 마커는 코드 가독성을 떨어뜨리고 불필요한 경우가 많기 때문에, 정규식을 활용하면 손쉽게 제거할 수 있습니다.
CDATA 블록이란?
CDATA(Character Data)는 XML이나 XHTML 파서가 해당 구간의 내용을 일반 텍스트로 취급하도록 지시하는 마커입니다. 과거에는 자바스크립트 코드에 포함된 <, >, & 같은 특수문자가 XML 파서에 의해 오류로 처리되지 않도록 /* <![CDATA[ */와 /* ]]> */ 사이에 코드를 감싸는 방식이 널리 사용되었습니다.
정규식으로 CDATA 블록 제거하기
<script> 요소 내부의 CDATA 블록을 제거하려면 줄바꿈을 포함한 모든 문자를 매칭할 수 있는 [\s\S]*? 패턴을 사용하면 됩니다. 일반적으로 점(.)은 줄바꿈 문자를 매칭하지 못하기 때문에, 여러 줄에 걸친 코드를 다룰 때는 [\s\S]가 더 안전한 선택입니다.
다음은 CDATA 블록이 포함된 원본 코드 예시입니다.
<script>
/* <![CDATA[ */
var A = new Array();
/* ]]> */
</script>
Demo Text Demo Text
Demo Text
<script type="text/javascript">
/* <![CDATA[ */
var B = new Array();
Demo Text Demo Text
/* ]]> */
</script>
Demo Text
아래와 같은 정규식 패턴을 적용하면 CDATA 시작 마커부터 종료 마커까지 전체 블록을 한 번에 제거할 수 있습니다.
const cleaned = str.replace(/\/\*\s*<!\[CDATA\[\s*\*\/[\s\S]*?\/\*\s*\]\]>\s*\*\//g, '');
패턴 설명
/\*\s*<!\[CDATA\[\s*\*\/:/* <![CDATA[ */시작 마커를 매칭합니다.[\s\S]*?: 줄바꿈을 포함한 모든 문자를 최소한으로(lazy) 매칭하여, 인접한 다른 블록까지 건너뛰지 않도록 합니다./\*\s*\]\]>\s*\*\//:/* ]]> */종료 마커를 매칭합니다.g플래그 : 문서 내 모든 CDATA 블록을 반복해서 제거합니다.
이 방법을 사용하면 여러 개의 <script> 블록이 포함된 HTML 문서에서도 CDATA 마커만 깔끔하게 정리하고 실제 자바스크립트 코드는 그대로 유지할 수 있습니다.