JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<p>This is a sample paragraph. It can contain a link to http://google.com or maybe
    even include a direct link to an image, such as http://www.google.com/images/logos/ps_logo2.png.
    Either way, the intent is to transofmr these links (http://www.yahoo.com/) in to a clickable
    or viewable link/image.</p>

JavaScript

// parseUri 1.2.2
// (c) Steven Levithan <stevenlevithan.com>
// MIT License
// --- http://blog.stevenlevithan.com/archives/parseuri
function parseUri (str) {
    var    o   = parseUri.options,
        m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
        uri = {},
        i   = 14;

    while (i--) uri[o.key[i]] = m[i] || "";

    uri[o.q.name] = {};
    uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
        if ($1) uri[o.q.name][$1] = $2;
    });

    return uri;
};
parseUri.options = {
    strictMode: false,
    key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
    q:   {
        name:   "queryKey",
        parser: /(?:^|&)([^&=]*)=?([^&]*)/g
    },
    parser: {
        strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
        loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
    }
};//end parseUri

String.prototype.convertUrls = function(){
    var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig
    return this.replace(urlRegex,function(url){
        if (parseUri(url).file.match(/\.(jpg|png|gif|bmp)$/i))
            return '<img src="'+url+'" alt="'+url+'" />';
        return '<a href="'+url+'">'+url+'</a>';
    });
}
function convertUrls(element){
    element.innerHTML = element.innerHTML.convertUrls();
}
convertUrls(document.getElementsByTagName('p')[0]);