irobinson/gist:1592999

## gistfile1.txt
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>test</title>
<body>
  <p>Shit yeah, go on, type some shit!</p>
  <textarea></textarea>
  <div style="display:none;"></div>
  <a href="#" style="display:none;">clear</a>
</body>
</html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $('body').previewify();
});

/*globals jQuery, window */
(function ($, window) {
    "use strict";
    $.fn.previewify = function (options) {
        var opts = $.extend({ }, $.fn.previewify.defaultOptions, options),
            $wrap = this,
            $textArea = $wrap.find(opts.textareaSelector),
            $clearLink = $wrap.find(opts.clearPreviewSelector),
            $previewArea = $wrap.find(opts.previewSelector);

        // updates the preview area
        function updatePageValues(url){

          // if this url is already "in" the preview, don't add it.
          // this url stays in the preview area if cleared, so it stays cleared until a new url is entered first
          if ($previewArea.data('url') === url) {
            return;
          }

          $textArea.data('linkedUp', true);
          $previewArea.data('url', url);
          $clearLink.show();

          // todo: replace this with actual preview functionality
          $previewArea.text('Preview for: ' + url).show();
        }

        // resets the preview area (but keeps the associated url in a data field for future use)
        function removePageValues(){
          $textArea.data('linkedUp', false);
          $clearLink.hide();
          $previewArea.text('').hide();
        }

        // returns true if link already found, false if not
        function isLinkedUp(){
          return $textArea.data('linkedUp');
        }

        // parses the first url out of a block of text
        function findUrl(enteredText){
          var replacePattern1, replacePattern2, replacePattern3, url;
          //URLs starting with "www."
          replacePattern1 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
          url = replacePattern1.exec(enteredText);
          if (!url) {
            //URLs starting with http://, https://, or ftp://
            replacePattern2 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
            url = replacePattern2.exec(enteredText);
          }
          if (url) {
            url = (url.toString().split(',')[0]);
            updatePageValues(url);
          }
        }

        // set default state, link not found.
        $textArea.data('linkedUp', false);

        // key event
        $textArea.keyup(function(e){
          var code = e.keyCode || e.which;
          if (code !== 13 && code !== 32) { // space, enter key
            return;
          }
          if (!isLinkedUp()) {
            findUrl($(this).val());
          }
        });

        // paste event
        $textArea.bind('paste', function(e){
          if (!isLinkedUp()) {
            findUrl($(this).val());
          }
        });

        // removes the preview
        $clearLink.click(function(e){
          e.preventDefault();
          removePageValues();
        });

    };

    $.fn.previewify.defaultOptions = {
        textareaSelector: 'textarea',
        previewSelector: 'div',
        clearPreviewSelector: 'a'
    };

} (jQuery, window));
</script>
	<!doctype html>
	<html lang=en>
	<meta charset=utf-8>
	<title>test</title>
	<body>
	<p>Shit yeah, go on, type some shit!</p>
	<textarea></textarea>
	<div style="display:none;"></div>
	<a href="#" style="display:none;">clear</a>
	</body>
	</html>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">

	$(document).ready(function(){
	$('body').previewify();
	});

	/globals jQuery, window /
	(function ($, window) {
	"use strict";
	$.fn.previewify = function (options) {
	var opts = $.extend({ }, $.fn.previewify.defaultOptions, options),
	$wrap = this,
	$textArea = $wrap.find(opts.textareaSelector),
	$clearLink = $wrap.find(opts.clearPreviewSelector),
	$previewArea = $wrap.find(opts.previewSelector);

	// updates the preview area
	function updatePageValues(url){

	// if this url is already "in" the preview, don't add it.
	// this url stays in the preview area if cleared, so it stays cleared until a new url is entered first
	if ($previewArea.data('url') === url) {
	return;
	}

	$textArea.data('linkedUp', true);
	$previewArea.data('url', url);
	$clearLink.show();

	// todo: replace this with actual preview functionality
	$previewArea.text('Preview for: ' + url).show();
	}

	// resets the preview area (but keeps the associated url in a data field for future use)
	function removePageValues(){
	$textArea.data('linkedUp', false);
	$clearLink.hide();
	$previewArea.text('').hide();
	}

	// returns true if link already found, false if not
	function isLinkedUp(){
	return $textArea.data('linkedUp');
	}

	// parses the first url out of a block of text
	function findUrl(enteredText){
	var replacePattern1, replacePattern2, replacePattern3, url;
	//URLs starting with "www."
	replacePattern1 = /(^\|[^\/])(www\.[\S]+(\b\|$))/gim;
	url = replacePattern1.exec(enteredText);
	if (!url) {
	//URLs starting with http://, https://, or ftp://
	replacePattern2 = /(\b(https?\|ftp):\/\/[-A-Z0-9+&@#\/%?=~_\|!:,.;]*[-A-Z0-9+&@#\/%=~_\|])/gim;
	url = replacePattern2.exec(enteredText);
	}
	if (url) {
	url = (url.toString().split(',')[0]);
	updatePageValues(url);
	}
	}

	// set default state, link not found.
	$textArea.data('linkedUp', false);

	// key event
	$textArea.keyup(function(e){
	var code = e.keyCode \|\| e.which;
	if (code !== 13 && code !== 32) { // space, enter key
	return;
	}
	if (!isLinkedUp()) {
	findUrl($(this).val());
	}
	});

	// paste event
	$textArea.bind('paste', function(e){
	if (!isLinkedUp()) {
	findUrl($(this).val());
	}
	});

	// removes the preview
	$clearLink.click(function(e){
	e.preventDefault();
	removePageValues();
	});

	};

	$.fn.previewify.defaultOptions = {
	textareaSelector: 'textarea',
	previewSelector: 'div',
	clearPreviewSelector: 'a'
	};

	} (jQuery, window));
	</script>