ページ内URLの自動リンク

今回はクライアントからの相談について事前調査です。
内容としては以下の内容になります。
 「サイトにて利用者が入力した内容についてURL が入力されている場合には自動的にリンクにして欲しい」

おおよそ、正規表現を使用するのかとは思うのですが・・・
とりあえずはやってみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var regex   = /((https?):\/\/[\x21-\x7e]+)/ig;
                var targetTxt;
                var setTxt;

                $('#btn').click( function() {

                    targetTxt = $('#disp').html();
                    setTxt    = targetTxt.replace( regex, '<a href="$1">$1</a>' );

                    $('#disp').html( setTxt );
                    $('#button_area').hide();

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <div id="disp">
                rss version="2.0"
                xmlns:content="http://purl.org/rss/1.0/modules/content/"
                xmlns:wfw="http://wellformedweb.org/CommentAPI/"
                xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:atom="http://www.w3.org/2005/Atom"
                xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
                xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
                
                title JSource /title 
                atom:link href="http://jsource.nakweb.com/?feed=rss2" rel="self" type="application/rss+xml" /
                link http://jsource.nakweb.com /link
                link https://jsource.nakweb.com /link
                description ~ Javascript 備忘録 ~ /description 
                lastBuildDate Sat, 03 Sep 2016 23:15:47 +0000 /lastBuildDate 
                language ja /language
                sy:updatePeriod hourly /sy:updatePeriod
                sy:updateFrequency 1 /sy:updateFrequency
                generator https://wordpress.org/?v=4.5.4 /generator
            </div>
        </div>

        <div id="button_area">
            <button id="btn">Click</button>
        </div>

    </body>
</html>

sample

sample を表示すると適当な文言と Button が表示されます。
Button を Click すると正規表現に設定した条件の部分に a tag を挿入します。

実際の正規表現については「http」か「https」で始まる内容を対象とします。
また 16新数での「x21(!)」から「x7e(~)」までの文字列が続くものが対象です。
簡単に言うと「半角英数字(スペースや特殊な制御文字は除く)」になるかなと思います。

本当はもっと詳しく設定もできるのでしょうが、そこまで詳しくする必要はないかなぁ
とも思っています。
もっと詳しくする場合には改めて再考します(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です