웹 페이지에서 특정 요소를 시각적으로 돋보이게 하고 싶다면 구문 강조기(Syntax Highlighter)를 활용할 수 있습니다. 이 글에서는 JavaScript의 정규 표현식과 DOM 조작을 이용해 간단한 구문 강조기를 직접 만들고, 버튼 클릭 한 번으로 링크에 스타일을 적용하는 방법을 단계별로 살펴봅니다.
핵심 동작 원리
이 예제는 다음과 같은 방식으로 작동합니다.
1. 정규 표현식으로 HTML 내부의 <a> 태그와 href 속성, 링크 텍스트를 추출합니다.
2. String.replace() 메서드를 사용해 매칭된 부분을 새로운 클래스(colorLinks)가 적용된 태그로 교체합니다.
3. 버튼을 클릭하면 highlightLinks() 함수가 호출되어 div 영역의 innerHTML이 갱신됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.colorLinks {
color: rgb(131, 44, 212);
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.setColor {
margin: 20px;
padding: 10px;
border: none;
font-size: 18px;
background-color: rgb(226, 43, 89);
color: white;
}
</style>
</head>
<body>
<h1>Syntax Highlighting example</h1>
<div class="CodeDiv">
<a href="https://www.google.com">Go to google.com</a>
<a href="https://www.facebook.com">Go to facebook.com</a>
</div>
<button class="setColor" onclick="highlightLinks()">Click Here</button>
<h2>Click the above button to highlight the links</h2>
<script>
var anchorRg = /[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g;
function highlightLinks() {
var text = document.querySelector(".CodeDiv").innerHTML;
text = text.replace(anchorRg, function() {
function check(arguments) {
let tempArr = [];
tempArr.push(Array.prototype.slice.call(arguments, 2, 4));
return `<a class="colorLinks" href=${tempArr[0][0]}>${tempArr[0][1]}</a><br>`;
}
return check(arguments);
});
document.querySelector(".CodeDiv").innerHTML = text;
}
</script>
</body>
</html>코드 설명
.colorLinks 클래스는 강조된 링크에 적용되는 스타일로, 보라색 계열의 굵은 텍스트와 밑줄 제거 효과를 지정합니다. .setColor 클래스는 버튼의 배경색과 여백 등 외형을 담당합니다.
스크립트 부분의 anchorRg 변수에는 <a href="...">...</a> 형태의 앵커 태그를 찾아내는 정규 표현식이 저장되어 있습니다. replace() 함수의 콜백에서 check() 내부 함수가 매칭 결과 중 href 값과 링크 텍스트만 추출해, colorLinks 클래스가 추가된 새로운 <a> 태그와 줄바꿈(<br>)으로 재구성합니다.
실행 결과
위 코드를 실행하면 창 너비가 700px보다 클 때 다음과 같은 초기 화면이 출력됩니다.
여기서 "Click Here" 버튼을 클릭하면 두 개의 링크가 강조 스타일이 적용된 상태로 각 줄에 나란히 표시됩니다.
마무리
이처럼 정규 표현식과 innerHTML 교체만으로도 별도의 라이브러리 없이 간단한 구문 강조 기능을 구현할 수 있습니다. 실무에서는 Prism.js나 highlight.js 같은 전용 라이브러리를 사용하는 것이 더 안전하고 편리하지만, 원리를 이해하는 데는 이런 직접 구현 예제가 큰 도움이 됩니다.