replace()を使ってページ内のURL（http、httpsから始まる文字）をリンク化【JavaScript】｜DAD UNION

ウェブページやブログを作成していると、テキスト内にURLがそのまま表示されてしまい、リンクとして機能しないことがあります。特に、手動でリンクを作成しなければならない場合、リンクの貼り忘れや記述ミスが発生することがあります。こうした問題を解決するために、jQueryのreplace()を使ってページ内に表示されているURL（httpやhttpsで始まる文字列）を自動的にリンクとして変換する方法をご紹介します。

この記事では、具体的な手順を分かりやすく説明しますので、実装できるでしょう。さらに、この方法を使うことで、ウェブページの利便性を向上させることができます。

Contents

CSSによるリンクスタイルの設定
replace()を使ってページ内にあるURL（http、httpsから始まる文字）をリンク化（aタグ）するJavaScriptの記述
HTMLコードの例
ページ内にあるリンク（http、httpsから始まる文字）をリンク化するデモページ
まとめ

CSSによるリンクスタイルの設定

まずは、リンクの見た目を整えるためにCSSを使用してスタイルを設定します。リンクのスタイルは、ユーザーがページを閲覧する際の使いやすさや見やすさに大きく影響します。以下のCSSコードを使用して、リンクのスタイルを設定しましょう。

<style>
body{
	padding: 0;
	text-align: center;
	position: relative;
	margin: 0;
	height: 100%;
}
h1{
	padding:10px 0;
	font-size:18px;
	line-height:1.4em;
}
a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
.clWrap{
	width:800px;
	margin:0 auto;
}
.clWrapSub{
	width:500px;
	margin:0 auto;
	text-align:left;
}
</style>

　
このCSSコードは、リンクのデザインをシンプルで読みやすいものにしています。aタグの下線を非表示にし、ホバー時に下線を表示することで、リンクがクリック可能であることを視覚的に示しています。また、リンクの色を設定することで、ページ全体のデザインに統一感を持たせることができます。

replace()を使ってページ内にあるURL（http、httpsから始まる文字）をリンク化（aタグ）するJavaScriptの記述

jQueryを使用してページ内のURLを自動的にリンク化する方法を見ていきます。この方法を使うことで、手動でリンクを作成する手間が省けるだけでなく、リンクの貼り忘れを防ぐことができます。

まず、jQueryのjquery.min.js（v1.9.1）ファイルを読み込みます。

次に、jQueryの.replace()関数を使ってページ内に表示されているURLをリンク化します。具体的には、bodyタグ内のすべてのテキストを対象に、httpやhttpsで始まる文字列を探し、それをaタグで囲む処理を行います。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
	$('body').html($('body').html().replace(exp,"<a href='$1' target='_blank'>$1</a>"));
});
</script>

　
このコードは、正規表現を使ってURLを検出し、自動的にリンクタグに置き換えます。例えば、

https://example.com

というテキストがあった場合、それが

<a href="https://example.com" target="_blank">https://example.com</a>

のように変換されます。

target="_blank"

属性を追加することで、リンクがクリックされた際に新しいタブで開くように設定しています。

HTMLコードの例

次に、リンク化されるURLの例を含むHTMLコードを紹介します。このコードを使用して、実際にリンク化がどのように機能するかを確認できます。

<div class="clWrap">

	<h1>ページ内のURL文字（http、httpsから始まる文字）を自動リンク化します。</h1>
    
    <div class="clWrapSub">

	<ul>
<li class="cat-item cat-item-36">https://dad-union.com/category/css</li>
<li class="cat-item cat-item-2">https://dad-union.com/category/javascript</li>
<li class="cat-item cat-item-3">https://dad-union.com/category/jquery</li>
<li class="cat-item cat-item-53">https://dad-union.com/category/php</li>
	</ul>

	</div><!--/clWrapSub-->
    
</div><!--/clWrap-->

　
この例では、ulタグ内に複数のURLを含むliタグがあります。このHTMLコードがページに表示されると、jQueryスクリプトによって自動的に各URLがリンク化されます。