Highlight ข้อความทุกครั้งที่โหลดหน้าเว็บด้วย JavaScript

ใช้ split() แยกคำ วนลูปตรวจสอบ คำที่ต้องการ ห่อด้วย <span class="color"> แล้ว join() กลับ

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlight on Load</title>
  <style>
    .yellow { color: gold; background: #333; padding: 2px 4px; border-radius: 3px; }
    .blue { color: lightblue; background: #333; padding: 2px 4px; border-radius: 3px; }
  </style>
</head>
<body>
  <h1 id="pageLoads">My yellow Words, your blue Words</h1>
  <script>
    const ids = document.getElementById("pageLoads");
    const words = ids.innerHTML.split(" ");
    
    for (let i = 0; i < words.length; i++) {
      if (words[i] === "blue") {
        words[i] = "<span class='blue'>" + words[i] + "</span>";
      }
      if (words[i] === "yellow") {
        words[i] = "<span class='yellow'>" + words[i] + "</span>";
      }
    }
    ids.innerHTML = words.join(" ");
  </script>
</body>
</html>

คำอธิบาย

• Script วางท้าย <body> หรือใน DOMContentLoaded ให้ DOM พร้อม
• split(" ") แยกคำด้วย Space (ข้อควรระวัง: Punctuation จะติดกับคำ)
• cải thiện: ใช้ Regex /\b(word)\b/g จับคู่คำสมบูรณ์
• Better Approach: TreeWalker เดิน Text Nodes แทน innerHTML (ปลอดภัยกว่า)

ผลลัพธ์

"yellow" สีทอง | "blue" สีฟ้า | คำอื่นๆ ปกติ