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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

634閲覧

railsでurlをアイコンマークに変更して、外部リンクに移動できるようにしたい。

kokosi1062

総合スコア39

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/04/10 13:41

#前提・実現したいこと

html

1<div class="memoAuthor"> 2 <%= text_url_to_link(h(@memo.url)).html_safe %> 3</div>

現状、ビューではurlが表示され、クリックすると外部リンクに移動できます。
ですが、そのままurlで表示されてるため、文章のようで見辛いので、アイコンマークに変えたい内容となります。
urlは固定でなく、投稿で保存されたmemosテーブルから抽出しています。

#該当のソースコード

rails

1<div class="formcontents"> 2 <div class="showcontainer"> 3 <div class="showcontainer__top"> 4 <div class="memoTitle"> 5 <%= @memo.title %> 6 </div> 7 <% if user_signed_in? && current_user.id == @memo.user_id %> 8 9 <div class="icon"> 10 <%= link_to "編集", edit_memo_path(@memo.id), class: "manage" %> 11 <%= link_to "削除", memo_path(@memo.id), method: :delete, class: "delete" %> 12 </div> 13 <% end %> 14 15 </div> 16 17 <div class="memoDate"> 18 <%= @memo.created_at.to_s(:datetime_jp) %> 19 </div> 20 <div class="memoAuthor"> 21  <%= text_url_to_link(h(@memo.url)).html_safe do%> 22 <i class="fa fa-search search-btn"></i> 23 <% end %> 24 25 </div> 26 <div class="memoText"> 27 <%= simple_format @memo.text %> 28 </div> 29 </div> 30</div> 31

rails

1module ApplicationHelper 2 require "uri" 3 4 def text_url_to_link text 5 6 URI.extract(text, ['http','https'] ).uniq.each do |url| 7 sub_text = "" 8 sub_text << "<a href=" << url << " target=\"_blank\">" << url << "</a>" 9 10 text.gsub!(url, sub_text) 11 end 12 13 return text 14 end 15end 16

#試したこと

html

1<div class="memoAuthor"> 2 <%= text_url_to_link(h(@memo.url)).html_safe do%> 3 <i class="fa fa-search search-btn"></i> 4 <% end %> 5 </div>

このように記載してみたり、前後に書いてみましたが、アイコンとurlが一緒に表示されてしまい、
アイコンだけ表示したいのですが、ご教示いただけますと幸いです。
宜しくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問