HTMLのテキスト中のURLをリンクに置き換える

Tweet

Category JavaScript 2019/12/15

問題

URLを含むテキストをのURL部分を自動的にリンクに置き換えたいです。

答え

JavaScriptで対応する。

jQueryでhtmlを置き換えるとこんな感じでできる。

<div class="js-autolink">
URLを含む文章、URLを含む文章。
URLを含む文章、https://example.com/xxx/yyy/ URLを含む文章。
URLを含む文章、URLを含む文章、https://example.jp/aaa/bbb/ccc
</div>

<script>
$(function(){
    $('.js-autolink').each(function(){
        $(this).html($(this).html().replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,"<a href='$1'>$1</a>"));
    });
});
</script>

Demo

↓ 「ソースを表示」でこの付近のソースを見てみてください。