質問: ### 前提・実現したいこと 現在Ruby on Railsで簡単な検索機能を実装しているのですが、下の画像のように検索したワードと一致した文字を装飾するやり方が調べてもどうしてもわからなかっため、どのように実装できるか教えていただけませんか。 よろしくお願いいたします。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8bacbdb94c2b955803f30cd0ac3f3f62.png)
回答: Googleの検索結果では`検索キーワード`としているようなのでそれに合わせます。 gsubで検索キーワードを任意のタグ(ここではem)で囲んでやって、cssで装飾すれば良いと思います。 ``` # 表示したい文字列 text = 'Ruby on Rails(ルビーオンレイルズ)は、オープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller(MVC)アーキテクチャに基づいて構築' # 検索キーワード keyword = 'Ruby on Rails' # 検索キーワードをで囲む => 置換する text.gsub!(keyword, '' + keyword + '') => "Ruby on Rails(ルビーオンレイルズ)は、オープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その 名にも示されているようにRubyで書かれている。またModel View Controller(MVC)アーキテクチャに基づいて構築" ``` * css ``` em.search { 任意のスタイルを定義 } ``` これを実際に使う場合は、ヘルパーにして使うと思います。 * app/helpers/application_helper.rb ``` module ApplicationHelper def decorate_keyword(text, keyword) # 引数のtextを変化させないようにgsub!ではなく、gsubを使う # HTMLタグがエスケープされないようにhtml_safeで返す reuslt = text.gsub(keyword, '' + keyword + '') result.html_safe end end ``` * 検索結果のビュー? ``` <%= decorate_keyword("検索結果として表示する文字列", "検索キーワード") %> ```