JavaScript로 페이지 로드 시마다 특정 텍스트를 자동으로 강조 표시하는 방법

웹 페이지에서 특정 단어를 색상으로 강조하고 싶다면, 페이지가 로드될 때마다 자동으로 실행되는 JavaScript 코드를 활용할 수 있습니다. 핵심은 for 반복문과 <span> 태그를 조합하는 것입니다.

동작 원리

먼저 대상 요소의 텍스트를 공백을 기준으로 분리한 뒤, 각 단어를 하나씩 순회하면서 지정된 색상 이름(예: yellow, blue)과 일치하는지 확인합니다. 일치하는 단어는 해당 색상의 CSS 클래스를 가진 <span class="yourColorName"> 태그로 감싸고, 마지막에 다시 하나의 문자열로 합쳐서 원래 요소에 넣어주는 방식입니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .yellow {
        color: yellow;
    }
    .blue {
        color: blue;
    }
</style>
</head>
<body>
<h1 id="pageLoads">My yellow Words,your blue Words</h1>
<script>
    var ids = document.getElementById("pageLoads");
    var loadColorWords = ids.innerHTML.split(" ");
    for(var i = 0; i < loadColorWords.length; i++) {
        if(loadColorWords[i] == "blue") {
            loadColorWords[i] = "<span class='blue'>" + loadColorWords[i] + "</span>";
        }
        if(loadColorWords[i] == "yellow") {
            loadColorWords[i] = "<span class='yellow'>" + loadColorWords[i] + "</span>";
        }
    }
    ids.innerHTML = loadColorWords.join(" ");
</script>
</body>
</html>

코드 설명

document.getElementById("pageLoads")로 강조 대상이 되는 h1 요소를 가져옵니다.
split(" ")을 사용해 텍스트를 단어 단위로 나눕니다.
for 반복문으로 각 단어를 검사하여 "blue" 또는 "yellow"와 일치하면 해당 색상 클래스를 가진 span 태그로 감쌉니다.
join(" ")으로 다시 문자열을 합친 후 innerHTML에 할당해 화면에 반영합니다.

실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하면 됩니다.

실행 결과

JavaScript로 페이지 로드 시마다 특정 텍스트를 자동으로 강조 표시하는 방법

페이지가 로드되는 즉시 "yellow"라는 단어는 노란색으로, "blue"라는 단어는 파란색으로 자동 강조되어 표시됩니다.