ページ内にあるリンク(http、httpsから始まる文字)をjQueryを使ってリンク化



ページ内にあるリンク文字(http、httpsから始まる文字)を
a(リンク)タグに置換してみます。

1.CSSの記述例

<style>
.clWrapSub{
	width:500px;
	margin:0 auto;
	text-align:left;
}
</style>

2.読込むJsファイルとJavaScriptの記述例

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

3.HTMLの記述例

    <div class="clWrapSub">

	<ul>
    <li class="cat-item cat-item-103">http://www.blinderhidden.com/category/css</li>
    <li class="cat-item cat-item-10">http://www.blinderhidden.com/category/facebook</li>
    <li class="cat-item cat-item-14">http://www.blinderhidden.com/category/html5</li>
    <li class="cat-item cat-item-7">http://www.blinderhidden.com/category/javascript</li>
    <li class="cat-item cat-item-26">http://www.blinderhidden.com/category/javascript/ajax</li>
    <li class="cat-item cat-item-8">http://www.blinderhidden.com/category/javascript/jquery</li>
    <li class="cat-item cat-item-9">http://www.blinderhidden.com/category/php</li>
    <li class="cat-item cat-item-48">http://www.blinderhidden.com/category/php/smarty</li>
    <li class="cat-item cat-item-21">http://www.blinderhidden.com/category/seo</li>
    <li class="cat-item cat-item-4">http://www.blinderhidden.com/category/wordpress</li>
    <li class="cat-item cat-item-1">http://www.blinderhidden.com/category/sonohoka</li>
    <li class="cat-item cat-item-15">http://www.blinderhidden.com/category/smartphone</li>
    <li class="cat-item cat-item-38">http://www.blinderhidden.com/category/smartphone/android</li>
	</ul>

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

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

ページ内のURLはaタグできちんと記述した方が良いかと思いますが、
リンク貼り忘れには良いですね。