jQueryで文章中のURLを自動でリンクに変換する方法

2022年3月19日

テキスト内にURLがあるときに、自動で検知してリンクを貼る（aタグに変換する）方法をまとめました。

URLを自動でリンクにするjQueryコード

クラス.auto-linkを付与した要素内にURLがあった場合に、自動でリンクにするコードはこちら。

$('.auto-link').each(function (idx, elem) {
  let str = $(elem).html();
  let regexp_url = /((h?)(ttps?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/g;
  let regexp_makeLink = function(all, url, h, href) {
    return '<a href="h' + href + '" target="_blank">' + url + '</a>';
  }
  let textWithLink = str.replace(regexp_url, regexp_makeLink);
  $(elem).html(textWithLink);
});

このコードを貼り付けるだけでリンクになりますが、詳しい解説を知りたい方は次へ。

URLを自動でリンクにするjQueryコードの詳しい解説

$('.auto-link').each(function (idx, elem) {
  //...省略...
});

.auto-linkが付与された要素を探し出して、全てにループで処理を行います。

let str = $(elem).html();

まずは要素内のテキストを.html()で取得します。
.text()でも取得できますが、この場合は最終的に改行が無視されてしまうのでNGです。

let regexp_url = /((h?)(ttps?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/g;
let regexp_makeLink = function(all, url, h, href) {
  return '<a href="h' + href + '" target="_blank">' + url + '</a>';
}

取得したテキスト内でURLを探すための正規表現を設定します。

「正規表現」とは、文字列内で文字の組み合わせを照合するために用いられるパターンのこと。
具体的な書き方については以下が詳しいです。
https://murashun.jp/article/programming/regular-expression.html

正規表現に該当したものに対し、regexp_makeLinkでURL付与した形に変形しておきます。

let textWithLink = str.replace(regexp_url, regexp_makeLink);

指定要素内にあるURLをregexp_makeLinkで用意したものに置き換え。

$(elem).html(textWithLink);

最後にページ内のコンテンツを挿入し直して完了です。

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @miyachi_afh

URLをコピーしました！

コメント一覧（1件）

文章内のURLを半角スペースで自動リンク化＋HTMLのaタグも使用可能にする harublog より:

2022年11月13日 4:14 PM

[…] 文章内の英数字のみで構成されるURLをhttps://example.com半角スペースなしで自動リンクにする参考jQueryで文章中のURLを自動でリンクに変換する方法 | Miyachi LaboMiyachi Labo […]