koshigoe/jquery.autolink.html

## jquery.autolink.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.autolink.js"></script>
    <script type="text/javascript">
      jQuery(function($) {
         $(document.body).autolink();
      });
    </script>
  </head>
  <body>
    open
    <a href="http://www.example.com">http://www.example.com</a>
    <span>http://</span>
    <span>https://</span>
    <span>ftp://</span>
    <span>http://www.example.com/1とhttp://www.example.com/2とhttp://www.example.com/3?key=value</span>
    <div class="1">
      http://www.example.com/a
      <div class="1-1">
        http://www.example.com/b
        <div class="1-1-1">
          http://www.example.com/c
          <div class="1-1-1-1">
            http://www.example.com/d
            <div class="1-1-1-1-1">
              http://www.example.com/f
            </div>
            http://www.example.com/g
          </div>
          http://www.example.com/h
        </div>
        http://www.example.com/i
      </div>
      http://www.example.com/j
    </div>
    <a href="http://www.example.com">http://www.example.com</a>
    close
  </body>
</html>

## jquery.autolink.js
jQuery(function($) {
    var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;

    function makeHTML(textNode) {
        var source = textNode.data;
        return source.replace(re, function() {
            var url = arguments[0];
            var a = $('<a></a>').attr({'href': url, 'target': '_blank'}).text(url);
            return url.match(/^https?:\/\/$/) ? url : $('<div></div>').append(a).html();
        });
    };

    function eachText(node, callback) {
        $.each(node.childNodes, function() {
            if (this.nodeType != 8 && this.nodeName != 'A') {
                this.nodeType != 1 ? callback(this) : eachText(this, callback);
            }
        });
    };

    $.fn.autolink = function() {
        return this.each(function() {
            var queue = [];
            eachText(this, function(e) {
                var html = makeHTML(e);
                if (html != e.data) {
                    queue.push([e, makeHTML(e)]);
                }
            });
            $.each(queue, function(i, x) {
                $(x[0]).replaceWith(x[1]);
            });
        });
    };
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="./jquery.autolink.js"></script>
	<script type="text/javascript">
	jQuery(function($) {
	$(document.body).autolink();
	});
	</script>
	</head>
	<body>
	open
	<a href="http://www.example.com">http://www.example.com</a>
	<span>http://</span>
	<span>https://</span>
	<span>ftp://</span>
	<span>http://www.example.com/1とhttp://www.example.com/2とhttp://www.example.com/3?key=value</span>
	<div class="1">
	http://www.example.com/a
	<div class="1-1">
	http://www.example.com/b
	<div class="1-1-1">
	http://www.example.com/c
	<div class="1-1-1-1">
	http://www.example.com/d
	<div class="1-1-1-1-1">
	http://www.example.com/f
	</div>
	http://www.example.com/g
	</div>
	http://www.example.com/h
	</div>
	http://www.example.com/i
	</div>
	http://www.example.com/j
	</div>
	<a href="http://www.example.com">http://www.example.com</a>
	close
	</body>
	</html>
	jQuery(function($) {
	var re = /(?:(?=(?:http\|https):)([a-zA-Z][-+.a-zA-Z\d]):(?:((?:[-_.!~'()a-zA-Z\d;?:@&=+$,]\|%[a-fA-F\d]{2})(?:[-_.!~'()a-zA-Z\d;\/?:@&=+$,\[\]]\|%[a-fA-F\d]{2}))\|(?:(?:\/\/(?:(?:(?:((?:[-_.!~'()a-zA-Z\d;:&=+$,]\|%[a-fA-F\d]{2}))@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d][a-zA-Z\d])?)\.)(?:[a-zA-Z](?:[-a-zA-Z\d][a-zA-Z\d])?)\.?\|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\|\[(?:(?:[a-fA-F\d]{1,4}:)(?:[a-fA-F\d]{1,4}\|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\|(?:(?:[a-fA-F\d]{1,4}:)[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)(?:[a-fA-F\d]{1,4}\|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d))?))?\|((?:[-_.!~'()a-zA-Z\d$,;:@&=+]\|%[a-fA-F\d]{2})+))\|(?!\/\/))(\/(?:[-_.!~'()a-zA-Z\d:@&=+$,]\|%[a-fA-F\d]{2})(?:;(?:[-_.!~'()a-zA-Z\d:@&=+$,]\|%[a-fA-F\d]{2}))(?:\/(?:[-_.!~'()a-zA-Z\d:@&=+$,]\|%[a-fA-F\d]{2})(?:;(?:[-_.!~'()a-zA-Z\d:@&=+$,]\|%[a-fA-F\d]{2}))))?)(?:\?((?:[-_.!~'()a-zA-Z\d;\/?:@&=+$,\[\]]\|%[a-fA-F\d]{2})))?)(?:\#((?:[-_.!~'()a-zA-Z\d;\/?:@&=+$,\[\]]\|%[a-fA-F\d]{2})*))?)/img;

	function makeHTML(textNode) {
	var source = textNode.data;
	return source.replace(re, function() {
	var url = arguments[0];
	var a = $('<a></a>').attr({'href': url, 'target': '_blank'}).text(url);
	return url.match(/^https?:\/\/$/) ? url : $('<div></div>').append(a).html();
	});
	};

	function eachText(node, callback) {
	$.each(node.childNodes, function() {
	if (this.nodeType != 8 && this.nodeName != 'A') {
	this.nodeType != 1 ? callback(this) : eachText(this, callback);
	}
	});
	};

	$.fn.autolink = function() {
	return this.each(function() {
	var queue = [];
	eachText(this, function(e) {
	var html = makeHTML(e);
	if (html != e.data) {
	queue.push([e, makeHTML(e)]);
	}
	});
	$.each(queue, function(i, x) {
	$(x[0]).replaceWith(x[1]);
	});
	});
	};
	});