JavaScript

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

ウェブページやブログを作成していると、テキスト内にURLがそのまま表示されてしまい、リンクとして機能しないことがあります。特に、手動でリンクを作成しなければならない場合、リンクの貼り忘れや記述ミスが発生することがあります。こうした問題を解決するために、jQueryのreplace()を使ってページ内に表示されているURL(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がリンク化されます。

ページ内にあるリンク(http、httpsから始まる文字)をリンク化するデモページ

理論を学ぶだけではなく、実際に動作を確認することが大切です。以下のリンクから、今回紹介した方法を実際に試すことができるデモページにアクセスできます。

ページ内にあるリンク(http、httpsから始まる文字)をリンク化するデモ

このデモページでは、テキスト内のURLがどのようにリンク化されるかを確認できます。実際にクリックして、リンクが正しく機能するかを試してみてください。

まとめ

今回紹介した方法を使うことで、ウェブページやブログに表示されるURLを自動的にリンクとして機能させることができます。リンクの手動作成の手間を省き、リンクの貼り忘れを防止することで、ページのユーザビリティを向上させることができます。

ウェブページ作成に慣れていない方でも、今回紹介したステップに従うことで、簡単にリンク化を実装できるでしょう。また、この方法は、既存のウェブサイトにも容易に導入できるため、今すぐ実践してみてください。

さらに、今回の方法を基にして、他のテキスト処理やリンク作成の自動化を試みることで、ウェブ開発スキルをさらに向上させることができます。

以上が、jQueryを使ったページ内のURLリンク化の方法についての解説です。ぜひ、自分のウェブサイトに取り入れて、ユーザビリティ向上を目指しましょう。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。