質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 112

miSaito

score 13

前提・実現したいこと

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

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

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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("検索結果として表示する文字列", "検索キーワード") %>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+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ではなく逆スラッシュです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/18 18:34

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る