【jQuery/JS】特定の文字列をHTMLタグで囲む完全ガイド｜ハイライト・mark要素・複数キーワード・XSS対策・既存タグ保持まで

検索結果でキーワードを黄色くハイライトしたり、重要語句を <strong> で囲んだりする処理はjQueryの html() と replace() で実現できます。この記事では基本的な置換から大文字小文字無視・XSS対策・複数キーワード・既存HTMLタグ保持・ハイライト解除・リアルタイム検索まで実用的なパターンを解説します。

実装方法の比較

基本: replace() で文字列を <span> タグで囲む

text() でテキストを取得し、replace() でタグを挿入して html() で書き戻します。

<p id="target">jQueryを使ったWebサイトのサンプルテキストです。jQueryは便利です。</p>

<style>
.highlight {
  background-color: #fff176;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}
</style>

$(function () {
  var keyword = "jQuery";
  var $el = $("#target");

  // text() でHTMLタグなしのテキストを取得
  var text = $el.text();

  // replace() でキーワードを <span> で囲む
  var highlighted = text.replace(
    new RegExp("(" + keyword + ")", "g"),
    '<span class="highlight">$1</span>'
  );
  $el.html(highlighted);
});

HTML5 <mark> 要素でセマンティックにハイライト

HTML5の <mark> 要素は「検索キーワードへの該当箇所」を示すセマンティックなタグです。ブラウザのデフォルトスタイルで黄色ハイライトが適用されるため、CSSが不要です。

$(function () {
  var keyword = "jQuery";
  var $el = $("#target");

  // <mark> 要素で囲む（CSSなしでブラウザが黄色ハイライト）
  var highlighted = $el.text().replace(
    new RegExp("(" + keyword + ")", "gi"),
    "<mark>$1</mark>"
  );
  $el.html(highlighted);
});

XSS・ReDoS 対策：ユーザー入力を正規表現に使う場合

検索フォームの入力値をそのまま new RegExp() に渡すと、.* や ( など正規表現の特殊文字が悪用される可能性（ReDoS）があります。ユーザー入力を使う場合は必ず特殊文字をエスケープしてください。

// 正規表現の特殊文字をエスケープする関数
function escapeRegex(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

$(function () {
  var userInput = $("#search-input").val(); // ユーザー入力
  if (!userInput.trim()) return;

  var safeKeyword = escapeRegex(userInput); // 特殊文字をエスケープ
  var $el = $("#target");

  var highlighted = $el.text().replace(
    new RegExp("(" + safeKeyword + ")", "gi"),
    "<mark>$1</mark>"
  );
  $el.html(highlighted);
});

複数キーワードを一括ハイライト

$(function () {
  var keywords = ["jQuery", "JavaScript", "DOM"];
  var $el = $("#target");

  function escapeRegex(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }

  // 各キーワードをエスケープして | で連結し1つの正規表現に
  var pattern = keywords
    .map(function (kw) { return escapeRegex(kw); })
    .join("|");

  var highlighted = $el.text().replace(
    new RegExp("(" + pattern + ")", "gi"),
    "<mark>$1</mark>"
  );
  $el.html(highlighted);
});

既存のHTMLタグを壊さずにハイライトする

text() を使うと要素内のすべてのタグが除去されてしまいます。既存の <strong>・<a> などを残したい場合は、テキストノードのみを対象に処理します。

// テキストノードのみを対象にハイライトする関数
function highlightTextNodes($el, keyword) {
  function escapeRegex(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }
  var regex = new RegExp("(" + escapeRegex(keyword) + ")", "gi");

  // nodeType === 3 はテキストノード
  $el.contents().each(function () {
    if (this.nodeType === 3) {
      // テキストノードの場合: <mark> で囲んでHTMLに置換
      var newHtml = this.nodeValue.replace(regex, "<mark>$1</mark>");
      if (newHtml !== this.nodeValue) {
        $(this).replaceWith(newHtml);
      }
    } else if (this.nodeType === 1 && !$(this).is("mark, script, style")) {
      // 要素ノードの場合: 再帰的に処理（mark/script/styleは除外）
      highlightTextNodes($(this), keyword);
    }
  });
}

$(function () {
  // <strong> などの既存タグを保持したままハイライト
  highlightTextNodes($("#content"), "jQuery");
});

ハイライトを解除して元のテキストに戻す

$(function () {
  var $el = $("#target");

  // 方法1: data() で元のテキストを保存してから復元
  $el.data("original", $el.text()); // 元のテキストを保存

  // ハイライト実行
  $el.html($el.text().replace(/(jQuery)/g, "<mark>$1</mark>"));

  // 解除: 保存しておいたテキストで上書き
  $("#clear-btn").on("click", function () {
    $el.text($el.data("original"));
  });

  // 方法2: unwrap() で <mark> タグのみ除去（テキストはそのまま）
  // $(".highlight, mark").contents().unwrap();
});

リアルタイム検索ハイライト（入力連動）

入力フォームに文字が入力されるたびにハイライトを更新します。キーポイントは元のテキストを変数に保存して毎回そこから処理することです。

<input type="text" id="search-input" placeholder="キーワードを入力...">
<div id="content">
  <p>jQueryを使ったWebサイト開発は効率的です。</p>
  <p>DOMの操作やAjax通信もjQueryで簡単に実装できます。</p>
</div>

$(function () {
  // 最初に元のテキストを保存（変更前のテキストをキープ）
  var originalText = $("#content").text();

  function escapeRegex(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }

  $("#search-input").on("input", function () {
    var keyword = $(this).val().trim();
    var $content = $("#content");

    if (!keyword) {
      $content.text(originalText); // 空なら元のテキストに戻す
      return;
    }

    var safeKeyword = escapeRegex(keyword);
    var highlighted = originalText.replace(
      new RegExp("(" + safeKeyword + ")", "gi"),
      "<mark>$1</mark>"
    );
    $content.html(highlighted);
  });
});

ハイライトのCSSスタイル例

/* シンプルな黄色ハイライト */
.highlight, mark {
  background-color: #fff176;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}

/* マーカーペン風（下線グラデーション） */
.highlight-marker {
  background: linear-gradient(transparent 60%, #ffeb3b 60%);
  font-weight: bold;
}

/* 赤字・警告 */
.highlight-red {
  color: #e53935;
  font-weight: bold;
}

/* 現在のナビゲーション位置（アクティブキーワード） */
.highlight-current {
  background-color: #ff9800;
  color: #fff;
  border-radius: 2px;
  padding: 0 2px;
}

まとめ

jQueryで特定の文字列をHTMLタグで囲むポイントをまとめます。

• 基本: text() で取得 → replace() でタグ挿入 → html() で書き戻し
• セマンティック: <span class="highlight"> より <mark> を推奨（意味あり・デフォルトスタイルあり）
• 大小無視: new RegExp(kw, "gi") の i フラグ
• ユーザー入力: escapeRegex() で正規表現特殊文字を必ずエスケープ
• 複数キーワード: keywords.map(escapeRegex).join("|") で1つの正規表現に
• 既存タグ保持: テキストノード（nodeType===3）を再帰処理、または mark.js
• 解除: $("mark").contents().unwrap() または元テキストを data() で保存して復元
• リアルタイム: 元テキストを変数に保存して毎回そこから処理

関連記事: 文字列をハイライトする完全ガイド（mark.js・ナビゲーション） / リストをリアルタイムに絞り込む完全ガイド / text()でテキストを設定・取得する完全ガイド

よくある質問（FAQ）