【PHP】検索文字列をハイライトさせる簡単な方法

プログラミング

どうも、コウイチです。

今回は、テキストボックスに文字列を入力すると、対象の文章にヒットした部分をハイライト(強調表示)させる機能を、PHPで実装してみたいと思います。

ヒットした文字列を黄色い蛍光ペンで塗ってみます。

作りたい機能

以下の機能を作ります。

検索画面

検索画面です。検索窓にキーワードを入力して、エンターか検索ボタンをクリックすると、下のサンプル文章に対して検索をかけ、ヒットしたらその部分を黄色くハイライトさせる。

それだけではつまらないので、あいまい検索を可能にしてみた

あいまい検索も可能にしてみました。

ただ検索するだけではなくて、多少のあいまいな検索にもヒットするように。

たとえば、

ひらがなでもカタカナでも、半角でも全角でも、大文字でも小文字でも、違いを無視してヒットさせるようにしました。

変換をミスったりするユーザーもいますし、半角全角の違いでヒットしないとなると結構不便です。

Google先生のような超高性能な「もしかして」機能は難しいですが、素人でも簡単なコードである程度はやれます。

ソースコードと解説

それでは完成形のサンプルコードをどうぞ。解説付きです。

作るファイルは、

  • index.php(メインファイル)
  • lib.php(ライブラリファイル)

の2つです。

index.php

メインのPHPです。

解説

まず、「検索される文字列」を変数に準備します。長いのでヒアドキュメントを使用してます。

 

「検索する文字列」をPOSTで受信します。

 

lib.phpに定義(あとでやります)してある検索処理(search_highlight関数)にかけます。

これは、「検索する文字列」が見つかったら、「検索される文字列」のその部分をハイライトするHTMLタグを追加したものを返し、見つからなければ「検索される文字列」をそのまま返す関数です(のちほど作ります)

 

検索窓を作ります。エンターキーまたは、検索ボタンをクリックすると、自分自身のページへ入力された文字列をPOST送信するように、フォームを作ってます。

 

検索したキーワードを表示します。

 

ハイライト後のサンプル文章を表示します。

lib.php

ライブラリファイルです。

あいまい検索用の変換処理の関数(search_henkan)と、それを使用して検索し、ハイライトする関数(search_highlight)を定義します。

search_henkan関数の解説

あいまい検索の処理の解説です。仕組みは単純なものです。

「検索する文字列」と、「検索される文字列」について、それぞれあいまい検索用の変換をかけます。

具体的には、以下の3つの変換を行います。

  1. 「全角カタカナ」は「全角ひらがな」に変換
  2. 「全角」英数字は「半角」に変換
  3. 「大文字」は「小文字」に変換

こうした上で、「検索される文字列(変換後)」から、「検索する文字列(変換後)」を検索すれば、半角全角等の違いを無視してヒットさせることができます。

具体的に見ていきましょう。

あいまい検索用の変換にかけずに検索する場合
検索する文字列
(変換前)
検索する文字列
(変換後)
検索される文字列
(変換前)
検索される文字列
(変換後)
検索結果
プログラミング中毒者 衣食住よりプログラミング
~プログラミング中毒者の本音~
衣食住よりプログラミング
プログラミング中毒者の本音~

変換ミスなく検索した場合は、問題なくヒットする。

 

検索する文字列
(変換前)
検索する文字列
(変換後)
検索される文字列
(変換前)
検索される文字列
(変換後)
検索結果
プログラみんぐ中毒者 衣食住よりプログラミング
~プログラミング中毒者の本音~
 衣食住よりプログラミング
~プログラミング中毒者の本音~

検索する文字列に変換ミスがあるので、ヒットしない。

あいまい検索用の変換にかけて検索する場合
検索する文字列
(変換前)
検索する文字列
(変換後)
検索される文字列
(変換前)
検索される文字列
(変換後)
検索結果
プログラみんぐ中毒者 ぷろぐらみんぐ中毒者 衣食住よりプログラミング
~プログラミング中毒者の本音~
衣食住よりぷろぐらみんぐ
~ぷろぐらみんぐ中毒者の本音~
衣食住よりプログラミング
プログラミング中毒者の本音~

検索する文字列に変換ミスがあるが、検索用の変換処理をかけているため問題なくヒットする。

 

これが、今説明した、あいまい検索用の変換処理のコードです。

だいたいイメージは沸きましたでしょうか。

search_highlight関数の解説

それでは次に、search_highlight関数の解説です。

検索する文字列が見つかったら、検索される文字列のその部分をハイライトするHTMLタグを追加したものを返し、見つからなければ検索される文字列をそのまま返す関数です。

 

まず、mb_strpos関数を使って、「検索される文字列(変換後)」から「検索する文字列(変換後)」を探し、見つかるかを判定します。

この関数は、「文字列の中に指定した文字列が最初に現れる位置を見つける」関数です。

公式ドキュメントをチェック

見つかるとFALSE以外が返されるので、FALSE以外が帰ってきたらヒットしたと判定しています。

ヒットすると$posに、最初にヒットした位置が格納されます。

 

検索してヒットしたことがわかったら、「検索される文字列(変換前)」のヒットした箇所をハイライトしたいので、「検索される文字列(変換前)」について、$pos~「検索する文字列」の文字数分だけ取り出します。

ここで取りだしたものが、のちにハイライトするべき文字列となります。

mb_substr関数は、文字列の一部を切り出す関数です。⇒ 公式ドキュメントをチェック

mb_strlen関数は、文字列が何文字かを取得する関数です。⇒ 公式ドキュメントをチェック

 

「検索される文字列(変換前)」に対して、ハイライトするべき文字列を、ハイライトタグ付きのものに置換し、それを返却すれば完了です。

実行結果

それでは実行してみましょう。

まずは初期状態の画面です。

検索キーワードの入力ボックスに、適当な文字列を入力して、エンターを押してみます。

 

ひらがなとカタカナを間違わずに、検索してみました。見事ヒットして、ハイライトされていますね。

 

今度は、わざとひらがなとカタカナをあべこべにして検索してみました。しかしちゃんとヒットして、ハイライトされています。

これが、あいまい検索のなせる業です。

最後に

今回は簡略化と、検索機能がメインの解説なのでデータベースは使ってません。

検索される対象の文章をデータベースから引っ張ってくることができると、
かなり実用的になるかと思います。

是非試してみてください。

それでは、ありがとうございました。

スキルに自信がない20代でも、フリーランスになって月50万以上を稼げます。

最後に僕の実体験から、プログラマーが最も簡単に収入を上げる方法をお伝えします。

それは、フリーランスになることです。

 

エンジニアだったら誰でもフリーランスになれます。

業務経験が1年もあれば、月収50万が狙えます。

 

信じられないかもしれませんが、

フリーランスというのは稼げる働き方なのです。

 

僕は正社員でプログラマーをしていたのですが、

・終電帰りが当たり前
・上司に毎日怒鳴られる。
・手取り16万

という地獄のような環境が耐えられなくなり、

フリーランスになったら月収がいきなり60万になりました。

 

正直僕なんか、大したスキルはありません。

いつも下っ端の下請けプログラマーでした。

 

なのに収入は3倍になりました。

自信と健康とお金を手に入れることができました。

 

いつまでたっても上がらない正社員の給料にイライラしている方は、

是非フリーランスにチャレンジしてください。

 

プログラマーが最速で月収を上げる方法です。

 

・フリーランスなんて不安定じゃん。仕事見つからなかったらどうするの?

・仕事探しがだるい。

・転職活動なんかする暇ないんだよ

・俺のスキルじゃ無理なんだよ

 

僕もそう思ってビビってました。

ですが、思った以上に簡単でした。

 

思い込みというのは本当に恐ろしいです。

やれば行ける世界です。

 

そんな僕がフリーランスになって、

3年間働いても上がらなかった給料を、

一瞬で3倍に上げた方法を、以下の記事で書いています。


【月収20万円⇒月収60万円】価値ナシ貧乏プログラマーの僕が、7日間で収入が3倍になった物語

プログラミング
衣食住よりプログラミング

コメント

タイトルとURLをコピーしました