今回はテキスト内のURLテキストをハイパーリンクにする方法について、まとめました。
やりたいことはこんなことです。
【before（ハイパーリンクなし）】
【after（ハイパーリンクあり）】
ブログでも、twitterでも、メモでも何でもいいですが、参考にしたいリンクを貼ってもそのページに飛べなかったらユーザーからすると、使い勝手が悪いので、リンク先に飛べるようにします。
Contents
手順①app/helpers/application.helper.rbでヘルパーメソッドを作成する。
|
1 2 3 4 5 6 7 8 9 10 11 |
module ApplicationHelper require "uri" def text_url_to_link(text) URI.extract(text, ["http", "https"]).uniq.each do |url| end text end end |
順を追って、説明していきます。
|
1 |
require "uri" |
Railsのuriライブラリを呼び出すことで、extractメソッドを使うことができるようになります。extractメソッドは、文字列からURIを抽出することができるメソッドです。
①「URI.extract」で引数の値（文字列）からURIを抽出
引数の[“http”, “https”].uniqですが、これは引数のtextが「httpかhttps」のいずれかで始まるテキスト要素を重複を削除した形で配列を生成しています。例えば、例文にあげているURI（https://chopesu.com/）が一つの文章に3つ含まれていた場合は、重複を削除し、1つのURIだけが配列の要素になります。
https://ref.xaio.jp/ruby/classes/array/uniq
こうして生成された配列をeach文で繰り返し、do ~ endで囲まれたブロック内の処理を実行します。
②gsub!メソッドで、URLを置換
「gsub!」メソッドは、メソッドのレシーバ自身（ここでいうtext）を変更するメソッドです。どのように変更するのかを示しているのが、引数の記述です。
|
1 |
(text, "< a href=\"#{url}\"target=\"_blank\">#{url}") |
これは、textの値を”< a href=”#{url}”target=”_blank”>#{url}</a>”に置換するという意味です。https://ref.xaio.jp/ruby/classes/string/gsub
|
1 |
"target="_blank" |
この記述の意味は、新しいウィンドウにURLのリンク先ページを表示させるという意味です。もし、この記述をしなければ、ブラウザから一つ前の画面に戻るという操作をしないと、リンクする前のページに戻ることができず、とても使い勝手が悪くなります。https://www.tagindex.com/html_tag/link/a_target.html
textに「href属性に、新しいウィンドウでリンク先ページを表示させることができるURLを代入したaタグ」が代入されたことを意味しています。
手順②html.erbにメソッドを適用する
|
1 |
<%= text_url_to_link(blog.text).html_safe %> |
末尾の「.html_safe」はaタグをエスケープ（消す）ためのメソッドです。
もしこれを使わなかったら、このような画面になります。
これで、ハイパーリンクが完成しました。
普段何気なく使っているハイパーリンクですが、実際はこんな感じで実装していたんだと新しい発見になりました！
