検索ワードと一致した文字を装飾する方法を教えて欲しい

Question

前提・実現したいこと

現在Ruby on Railsで簡単な検索機能を実装しているのですが、下の画像のように検索したワードと一致した文字を装飾するやり方が調べてもどうしてもわからなかっため、どのように実装できるか教えていただけませんか。

よろしくお願いいたします。

Answer 1

Ruby 又は Rails で検索して"Ruby on Rails(ルビーオンレイルズ）は、"という検索結果が得られ、の"Ruby" と”Rails"部分をふと文字にするとします。

rr=%w(Ruby Rails).map{|r| "(#{r})"}.join("|")
reg=%r(#{rr})
"Ruby on Rails(ルビーオンレイルズ）は、".gsub(reg),"<em>\&</em>")
 # => "<em>Ruby</em> on <em>Rails</em>(ルビーオンレイルズ）は、"

なお、これをconsoleで試すときは \& でなく \& にしてください.
あ〜〜〜、円sainではなく逆スラッシュです。

Comments

[winterboum]

ベストアンサーの方法では、「入力した文字列の通り」のものしか<em>されないのでその点承知していてください。
googleのように ruby on rails で検索したら　rails 単独も ruby 単独も強調されるには私の方法でないとだめです。

Answer 2

Googleの検索結果では<em>検索キーワード</em>としているようなのでそれに合わせます。
gsubで検索キーワードを任意のタグ(ここではem)で囲んでやって、cssで装飾すれば良いと思います。

# 表示したい文字列
text = 'Ruby on Rails（ルビーオンレイルズ）は、オープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller（MVC）アーキテクチャに基づいて構築'

# 検索キーワード
keyword = 'Ruby on Rails'

# 検索キーワードを<em></em>で囲む => 置換する
text.gsub!(keyword, '<em class="search">' + keyword + '</em>')

=> "<em class=\"search\">Ruby on Rails</em>（ルビーオンレイルズ）は、オープンソースの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, '<em class="search">' + keyword + '</em>')
    result.html_safe
  end

end

• 検索結果のビュー？

<%= decorate_keyword("検索結果として表示する文字列", "検索キーワード") %>