【正規表現】URLぽい文字列をリンクにして返す【jQuery】

f:id:duo-taro100:20160218004611p:plain

たとえば、コメント欄などの値にURLらしき値が入力された場合、
該当URLだけそのURLのリンクにして、それ以外のURLは中間ページへのリンクにするという対応。

前提条件

・「http://www.sky-limit-future.com 」で始まるURLはそのままそのページに飛ばす。
・それ以外のURL(https,http,ftp)で始まる場合は中間ページに飛ばす

実装

■index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>replaceHTML</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="comment">
  <p class="txt">ここにコメントが入る</p>
  <p class="txt">http://www.sky-limit-future.com/</p>
  <p class="txt">http://www.sky-limit-future.com/entry/vue_study1</p>
  <p class="txt">http://hatenablog.com/</p>
  <p class="txt">http://www.sky-limit-future.com/http://www.sky-limit-future.com/http://www.sky-limit-future.com/</p>
</div>
</body>
<script src="app.js"></script>
</html>

■app.js

$(function(){
  $('.comment .txt').each(function(){
       var url = replaceHtmlLink($(this).html());
       $(this).html( url );
  });
});

var replaceHtmlLink = function(html) {

    // 中間ページのURLにする（本来は専用ページに飛ばす）
    var mediateUrl = "http://hatenablog.com/";

    // 外部リンクを中間ページに飛ばすリンクに置換して、該当URLは直リンクに置換する
    if(html.match(/(http:\/\/)(www.sky-limit-future.com)+/)){
        // 該当URLの場合
        html = html.replace(/(http:\/\/(www.sky-limit-future.com)+([\x21-\x7e])*)/gi, "<a href='$1' target='_blank'>$1</a>");
    } else if (html.match(/(https|http|ftp):\/\/.+/)){
        // URL形式の場合
        html = html.replace(/(https|http|ftp)+(:\/\/)+([\x21-\x7e]+)/gi, "<a href='" + mediateUrl + "' target='_blank'>$1$2$3</a>");
    }
    return html;
}

やってること

・正規表現で、該当URLかそれ以外のURLかを判断。
・該当URLであれば、aタグのhref属性とテキストにこのURLを設定する。
・それ以外のURLであれば、aタグのテキストにこのURLを設定し、href属性に中間ページのURLを設定する。
・URL形式でない物はそのまま返す

注意点

①複数行には対応できない？
同じ分岐に入る場合はこの実装でも対応できる。
例えば、複数行あるURLが全部「http://www.sky-limit-future.com/」の場合は大丈夫。
ただし、複数行あるURLが「http://www.sky-limit-future.com/」と「http://hatenablog.com/」の場合は後者がURLにならない気がする。
試してないけど。
対応するには正規表現を見直すか、htmlを改行コードで区切ってリストに格納して、リストをループとか。

②パラメータが複数(&が)あるURLの場合は以下の方法かなと考えている。
一旦、&のHTML-特殊文字(&)を「なにか」（他の文字列とかぶらないであろう文字列）に置き換える。
html.replace("&", なにか);

ここで、上記の処理を実施

先ほど置き換えた「なにか」を&(&)に置き換えて終了。
html = html.replace(/なにか/g, "&");

個人的感想

・replaceの$1、$2とか本当に便利。
・正規表現がまだ理解しきれてない

Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【正規表現】URLぽい文字列をリンクにして返す【jQuery】