Javascript

Javascriptで文字列内のURLをリンク化する

よくフリー入力スペースなどで、自動的にurlを判定し、リンク化していることがあります。
今回、「どうやるんだろう??」と疑問に思ったので、調査して実装してみました。

javascriptの正規表現を用いると出来るとこのことです。

まずは、実装の結果から。
(URLを入力してください)




コード

<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="ここにページの概要が入ります。">
 
        <title>自動リンク変換のテスト</title>
    <body>
 
        <form action="" onsubmit="return false">
            <textarea name="" id="text" cols="30" rows="10"></textarea>
            <input type="submit" name="" id="" onclick="AutoLink()">
        </form>
            
        <p>結果</p>
        <div id="result"></div>

   <script>
        function AutoLink() {
        var str = document.getElementById('text').value
        var regexp_url = /((h?)(ttps?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/g; // ']))/;正規表現(/〜/)を解釈してくれないエディタ等で自動整形を崩さないため。
        var regexp_makeLink = function(all, url, h, href) {
        return '<a href="h' + href + '" target="_blank">' + url + '</a>';
        }
        var textWithLink = str.replace(regexp_url, regexp_makeLink);
        document.getElementById('result').innerHTML = textWithLink
        }
    </script>

    </body>
</html>

解説

最後の部分で、replace関数の第2引数にfunctionを渡していることが分かります。
一瞬、「あれ渡せたっけ??」となりますが、
調べたところ、javascriptのreplace第2引数には関数も渡せるそうです。
知らなかった…

参考サイト

参考にさせていただきました。ありがとうございました。

文字列中のURLを探してリンクにするJavaScript
JavaScriptで、文字列の中からURLを検知してリンクにする

プログラミングの相談・質問を募集しています。

プログラミングに関する相談・質問を募集しています。是非この機会にどうぞ

ハヤぶろぐのLINE@登録はこちら


メールの方はこちら




-Javascript