ユーザーが検索したキーワードをハイライト表示してUIを改善させる。

ユーザーが検索したキーワードをハイライト表示してUIを改善させる。

検索文字のハイライト

ページ検索などで検索したテキストの背景がハイライト(着色、リンク化など)されているページを見たことはないでしょうか？ 簡単そうに見えて、実は複雑なロジックが組み込まれています。 真っ先に思い浮かぶ方法は、検索された文字列を本文から検索して、対応する箇所を置換するだけだと思います。 しかし、実はそうではありません。 例えば、 --- ログ 開発 プログラミング プログラミング開発 --- 上記4つのワードで検索されていたとします。 そうすると、ハイライトしたい文章で「ログ」「開発」 「プログラミング」プログラミング開発」が含まれていたとしたら、 置換だけでは正常にハイライトを行うことができません。 例えば「ログ」をハイライトの対象とすると「プ「ログ」ラミング」、「プ「ログ」ラミング開発」のようにマッチしてしまい、実現したいハイライト表示は行えません。 では、文字列が長い（文字量が多い）ものから順番に処理すればいいのではないかというと、そうではありません。 「プログラミング開発」は正常にハイライトできますが、次の「プログラミング」を置換する際に、 同じ文字列に対してハイライト処理を行ってしまいます。そして次々に「ログ」や「開発」がマッチしてしまいます。 一度マッチした文字列は除外するように条件分岐をす必要がありそうです。 さらに、この単語が複数出現する場合、マッチしないような条件分岐の条件がさらに複雑になります。

プログラムを組む

今回の場合は、下記のような手順でプログラムを組むことにより、正常にハイライトを行うことができます。 1) 全単語を取得する 2) 全単語の出現位置を記憶する（＝メモリ上に格納する） 3) 文字列の長さが長い順にソートする 4) 単語の出現位置＋単語の文字列の長さの範囲を計算する 5) 上記の範囲に単語の出現位置が含まれており、かつ対象の単語より文字列の長さが 　 短いものを除外する (二重ハイライトにしないため) 6) 出現開始位置より手前の文字列と対象の文字列を文字列結合する 7) 1)〜6)上記をハイライトが終わるまで(ハイライト対象の文字列の終点まで)繰り返す 8) 最後に残った文字列を結合する 日本語で書くと手順は上記の通りとなります。 利用するプログラム言語によって実装方法は異なりますが、単語の出現位置を for文で一字一句探すコードを書かなければならない場合や、文字列の長さでのソートが デフォルト関数として備わっていない場合などを考えると更に手順が長くなることも考えられます。

検索された文字列を自然にハイライトさせるために

自然言語処理などでは、パフォーマンスを高めるために様々な研究が行われています。 検索された文字列が、名詞なのか人名なのかなど自然言語処理を取り入れることで、より自然にハイライトを行うことが出来るでしょう。