Highlight text khi tải trang với JavaScript

Tự động highlight các từ khóa cụ thể mỗi khi trang load bằng cách wrap chúng trong <span> với class CSS.

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlight Text On Load</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
    .highlight-yellow { background: #fff3cd; color: #856404; padding: 2px 4px; border-radius: 3px; }
    .highlight-blue { background: #cce5ff; color: #004085; padding: 2px 4px; border-radius: 3px; }
    .highlight-green { background: #d4edda; color: #155724; padding: 2px 4px; border-radius: 3px; }
    #targetText { font-size: 24px; line-height: 1.6; }
  </style>
</head>
<body>
  <h1>Highlight Text On Page Load</h1>
  <p id="targetText">JavaScript là ngôn ngữ lập trình mạnh mẽ. JavaScript chạy trên trình duyệt và Node.js. Học JavaScript hôm nay!</p>
  
  <script>
    // Cấu hình: từ khóa -> CSS class
    const highlightRules = {
      'JavaScript': 'highlight-yellow',
      'trình duyệt': 'highlight-blue',
      'Node.js': 'highlight-green',
      'học': 'highlight-green'
    };
    
    function highlightText(element, rules) {
      let html = element.innerHTML;
      
      // Sắp xếp từ khóa dài trước để tránh ghi đè (VD: "JavaScript" trước "Script")
      const sortedKeywords = Object.keys(rules).sort((a, b) => b.length - a.length);
      
      sortedKeywords.forEach(keyword => {
        const className = rules[keyword];
        // Escape regex special chars trong keyword
        const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        // Regex global, case-insensitive
        const regex = new RegExp(`(${escaped})`, 'gi');
        html = html.replace(regex, `$1`);
      });
      
      element.innerHTML = html;
    }
    
    // Chạy khi DOM ready
    document.addEventListener('DOMContentLoaded', () => {
      const target = document.getElementById('targetText');
      highlightText(target, highlightRules);
    });
  </script>
</body>
</html>

Kết quả

Văn bản hiển thị với các từ khóa được highlight màu sắc khác nhau:

JavaScript là ngôn ngữ lập trình mạnh mẽ. JavaScript chạy trên trình duyệt và Node.js. Học JavaScript hôm nay!

Cải tiến: Tránh highlight trong tag HTML/script/style

function highlightTextSafe(element, rules) {
  const walker = document.createTreeWalker(
    element, NodeFilter.SHOW_TEXT, null, false
  );
  
  const textNodes = [];
  while (walker.nextNode()) {
    textNodes.push(walker.currentNode);
  }
  
  textNodes.forEach(textNode => {
    let text = textNode.textContent;
    let modified = false;
    const sortedKeywords = Object.keys(rules).sort((a, b) => b.length - a.length);
    
    sortedKeywords.forEach(keyword => {
      const className = rules[keyword];
      const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      const regex = new RegExp(`(${escaped})`, 'gi');
      if (regex.test(text)) {
        text = text.replace(regex, `$1`);
        modified = true;
      }
    });
    
    if (modified) {
      const wrapper = document.createElement('span');
      wrapper.innerHTML = text;
      textNode.parentNode.replaceChild(wrapper, textNode);
    }
  });
}

Thư viện khuyên dùng (Production):

• mark.js - Highlight từ khóa, hỗ trợ diacritics, synonyms, iframes
• highlight.js - Syntax highlighting code
• Prism.js - Syntax highlighting nhẹ, extensible

CSS ::highlight (CSS Custom Highlight API - Mới):

<style>
  ::highlight(search-match) { background: yellow; }
  ::highlight(error) { background: red; color: white; }
</style>
<script>
  const range = new Range();
  range.setStart(textNode, startOffset);
  range.setEnd(textNode, endOffset);
  CSS.highlights.set('search-match', new Highlight(range));
</script>

Hỗ trợ: Chrome 105+, Edge 105+, Safari 15.4+, Firefox 119+