ハイライト検索（Highlight Search）— テキスト強調

:root {
  --hl-border: #D0D7E0;
  --hl-mark-bg: #FFEC6E;
  --hl-text-color: #1a2233;
  --hl-count-color: #888;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; padding: 24px; background: #f0f2f5; }

.hl-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.hl-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hl-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--hl-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.hl-input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* hidden属性がflex等で上書きされないよう強制非表示 */
[hidden] { display: none !important; }

.hl-count {
  font-size: 13px;
  color: var(--hl-count-color);
  white-space: nowrap;
}

.hl-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--hl-text-color);
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}

.hl-text {
  padding: 16px;
  border: 1px solid var(--hl-border);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 200px;
  background: #fff;
  color: var(--hl-text-color);
}

mark {
  background: var(--hl-mark-bg);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

// ハイライト対象のテキスト（元データとして保持する）
var SAMPLE_TEXT = '【情報セキュリティ規程】\n\n第1条（目的）\nこの規程は、〇〇株式会社（以下「当社」という）における情報資産の適切な管理および保護を目的とする。\n\n第2条（適用範囲）\nこの規程は、当社の全従業員に適用する。外部委託先についても、契約に基づき同等の管理を求める。\n\n第3条（情報資産の分類）\n情報資産は、その重要度に応じて「機密情報」「社外秘情報」「公開情報」の3区分に分類する。\n取り扱い担当者は、各区分の基準に従い適切に管理しなければならない。\n\n第4条（アクセス管理）\n情報資産へのアクセスは、業務上必要な範囲に限定する。\nアクセス権限は、上長の承認を得た上で情報システム部門が付与する。\n不要になったアクセス権限は速やかに削除しなければならない。\n各システムへのログインには User ID とパスワードを使用する。\nシステムによっては「user id」と小文字表記されることがあるが、同義とみなす。\n\n第5条（インシデント対応）\n情報漏えい・不正アクセス等のセキュリティインシデントが発生または発覚した場合は、\n直ちに情報システム部門および管理職に報告しなければならない。\n報告を受けた管理職は、速やかに対策を講じ、被害の拡大を防止しなければならない。\n\n第6条（パスワード管理）\nPassword は8文字以上とし、英大文字・英小文字・数字を含めること。\npassword の変更は90日ごとに行い、過去3回分と同じものは使用できない。\n\n第7条（罰則）\nこの規程に違反した場合は、就業規則の定めに従い処分を行うことがある。';

// 正規表現の特殊文字をエスケープする（.や*などをそのまま検索できるようにする）
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// テキストをレンダリングする（キーワードがあればmark強調、なければプレーン表示）
function renderText(keyword) {
  var container = document.getElementById('hl-text');
  var countEl   = document.getElementById('hl-count');
  var ignoreCase = document.getElementById('hl-ignore-case').checked;

  // コンテナをクリア
  container.innerHTML = '';

  // キーワードが空なら全文をプレーンテキストで表示して終了
  if (!keyword) {
    container.appendChild(document.createTextNode(SAMPLE_TEXT));
    countEl.setAttribute('hidden', '');
    return;
  }

  // 正規表現を組み立てる（大文字小文字フラグ切り替え）
  var flags = ignoreCase ? 'gi' : 'g';
  var re = new RegExp(escapeRegExp(keyword), flags);

  var count    = 0;
  var lastIndex = 0;
  var match;

  // マッチを1件ずつ処理してDOMを組み立てる
  while ((match = re.exec(SAMPLE_TEXT)) !== null) {
    // マッチ前のテキスト部分をテキストノードで追加
    if (match.index > lastIndex) {
      container.appendChild(document.createTextNode(SAMPLE_TEXT.slice(lastIndex, match.index)));
    }

    // マッチ部分をmarkタグで追加
    var mark = document.createElement('mark');
    mark.textContent = match[0];
    container.appendChild(mark);

    lastIndex = re.lastIndex;
    count++;
  }

  // 最後のマッチ以降の残りテキストを追加
  if (lastIndex < SAMPLE_TEXT.length) {
    container.appendChild(document.createTextNode(SAMPLE_TEXT.slice(lastIndex)));
  }

  // 件数表示を更新する
  if (count > 0) {
    countEl.textContent = count + '件ヒット';
    countEl.removeAttribute('hidden');
  } else {
    countEl.textContent = '0件ヒット';
    countEl.removeAttribute('hidden');
  }
}

// リセット処理
function resetDemo() {
  document.getElementById('hl-input').value = '';
  document.getElementById('hl-ignore-case').checked = true;
  renderText('');
}

// イベント登録
document.getElementById('hl-input').addEventListener('input', function() {
  renderText(this.value);
});
document.getElementById('hl-ignore-case').addEventListener('change', function() {
  renderText(document.getElementById('hl-input').value);
});

// 初期表示
renderText('');