JSFiddle - React, Tailwind, and code Playground

by scispear

HTML

<div id="links">hello</div>
<input id="urls" value="www.google.com www.facebook.com www.wikipedia.org">

CSS

input { display:none; }

JavaScript

$(document).ready(function(){    
    // Update URLs
    var updateURL = function(){
        var self = $(this), links = $('#links').empty();
        $(self.val().split(' ')).each(function(i,o){
            links.append('<a href="'+o+'">'+o+'</a> ');
        });        

        self.hide();
        links.show();
    };

    $('#urls').blur(updateURL).blur();
    
    // handle click events
    $('#links').dblclick(function(){
        $(this).hide();
        $('#urls').show();
        
        return false;
    }).click(function(evt){
        var target = evt.target;
        
        if(target.tagName.toLowerCase() === 'a'){            
            target.clicked = target.clicked === undefined ? true : !target.clicked;
    
            if(target.clicked){
                setTimeout(function(){
                    target.clicked && window.open(target.href);
                    target.clicked = false;
                }, 300);
            }
        }
        
        return false;
    });
});