問題

WordPressで、検索ワードの部分をハイライトする機能を作成している際に問題に直面しました。なお、その際に参考としていた教本は「 WordPress 仕事の現場でサッと使える！デザイン教科書」です。

問題のコードがこちら↓

// 検索文字
$string = get_search_query();
// 検索対象
$text = preg_replace('|' . $string . '|i', '<span class="highlight">' . $string . '</span>', $text);

試しに、検索対象を「HELLO WORLD」、検索文字を「hello」として処理を実行します。想定としては、「HELLO WORLD」のようになるはずが、「hello WORLD」というように検索文字が反映されてしまいました。

サブマッチ文字列（$0,$1,...）を使おう！

正規表現による置き換えでは、置き換え後の文字列に置き換え前のマッチした文字列を含めることができます。それが、サブマッチ文字列の役割です。＄0にはマッチした文字列全体、＄1,＄2,...にはそれぞれカッコごとのサブマッチ文字列が入っています。

これを使い、先程のコードを修正します。

// 検索文字
$string = get_search_query();
// 検索対象
$text = preg_replace('|(' . $string . ')|i', '<span class="highlight">$0</span>', $text);

パターン文字列に括弧を加え、$stringを'＄0'に変更してください。これで「HELLO WORLD」のようになったはずです。もし、うまくいかない場合は、$0の部分を適宜＄1,$2などに変更してください。