Turn urls into links in text with jQuery, Java Script

UPDATED: 03 June 2012
jQuery

jQuery

Web Technology getting way much faster and easier. jQuery is the Advance version of javascript. jQuery's tag line says it self "Write less, do more". You cant's store everything in database. jQuery helps us to modify the data at the page load time.

I modified some script that helps you to turn your normalized text links to hyperlinks at load time. You can also add required information on that. Lets see how you can achieve this.


Regular Expression

Regular expression is machine language. It filter given input based on regular expression. For more information on regular expression read 
http://en.wikipedia.org/wiki/Regular_expression

Now let me tell you how you can use this javascript. If you want to convert the normalized links into hyperlinks use it as below.

<div id="links">
         http://www.0signals.com
</div>
<script type="text/javascript">
     $(function(){$('#links').doLinks(true);});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="doLinks.js"></script>
//doLinks.js is javascript file you need to create using the below javascript code

/* doLinks.js */
function linkify(hashTagFlag,inputText, options) { 
this.options = { linkClass: 'url', targetBlank: true }; 
this.options = $.extend(this.options, options); 
inputText = inputText.replace(/\u200B/g, ""); 

var replacePattern1 = /(name="[.\\/#a-zA-Z0-9\\(]*|id="[#a-zA-Z0-9\(]*|src="[#a-zA-Z0-9\\(]*|href="[#a-zA-Z0-9\(]*|">|\s>)?(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim; 
var replacedText = inputText.replace(replacePattern1, function($0,$1){ 
    return $1?$0:'<a class="'+ this.options.linkClass + '" href="' + $0 + '"target="_blank">'+ $0+ '</a>'; 
}); 

var replacePattern2 = /(|name="[.\\/#a-zA-Z0-9\\(]*|id="[#a-zA-Z0-9\(]*\(|src="[#a-zA-Z0-9\\(]*\\(|href="[#a-zA-Z0-9\(]*|">|\s>|https?:\/\/|ftp:\/\/)?www\.[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim;
var replacedText = replacedText.replace(replacePattern2, function($0,$1){ 
    return $1?$0:'<a class="'+ this.options.linkClass + '" href="http://' + $0 + '"target="_blank">'+ $0+ '</a>';
}); 

var bold = /\*\*(.*?)\*\*/gim; 
var replacedText = replacedText.replace(bold, function($0,$1){ 
    return $1 ? ('<b>' + $1 + '</b>') : $0; 
}); 

var Italic = /\*(.*?)\*/gim; 
var replacedText = replacedText.replace(Italic, function($0,$1){
    return $1 ? ('<i>' + $1 + '</i>') : $0; 
}); 

var Strike = /\--(.*?)\--/gim; 
var replacedText = replacedText.replace(Strike, function($0,$1){ 
    return $1 ? ('<strike>' + $1 + '</strike>') : $0; 
}); 
if(hashTagFlag){
//Works only when you pass true for hashTag
var hashTag = /#(\w*[a-zA-Z_]+\w*)/gim; 
var replacedText = replacedText.replace(hashTag, function($0,$1){ 
    return $1 ? ('<a  href="seach.jsp?query='+$0+'>"' + $0 + '</a>') : $0; 
});
}

var replacePattern3 = /([\.\w]+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; 
var replacedText = replacedText.replace(replacePattern3, '<a class="' + this.options.linkClass + '" href="mailto:$1">$1</a>'); 
return replacedText; 
}
$.fn.doLinks = function(hashTagFlag){
    this.each(function(){
        $(this).html(linkify(hashTagFlag,$(this).html()));
    });
}

This script works for the below scenario as well. Other scripts can't handle this input.
<a name="9552138821viruddh7(www.songs.pk).mp3" href="viruddh7(www.songs.pk).mp3" onclick=" playmedia(this.name)" id="viruddh7(www.songs.pk).mp3">viruddh7(www.songs.pk).mp3</a>

0 comments :