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

jQueryの.replace()を使ってページ内にあるURL（http、httpsから始まる文字）をリンク化（aタグ）する方法をご紹介します。

Contents

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

ページ内のURL（http、httpsから始まる文字）をリンク化するCSSの記述

※aタグの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>

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

※jquery.min.js（v1.9.1）ファイルを読み込みます。.replace(置換前文字列 , 置換後文字列)でページ（bodyタグ）内のURL（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（http、httpsから始まる文字）をリンク化するHTMLの記述

※httpsから始まる文字列をいくつか用意してます。

<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-->