JSFiddle - React, Tailwind, and code Playground

by JAAulde

HTML

<ul id="twitter_results"></ul>

JavaScript

var getTweets = ( function()
{
    /* Privatized text manipulation functions */
    var linkify = function( tweet )
    {
        return tweet.replace( /(http:\/\/[^\s]*)/g, "<a class='twtr-link' target=\"_blank\" href=\"$1\">$1</a>" );
    };

    var hashify = function( tweet )
    {
        return tweet.replace( /(^|\s+)#(\w+)/gi, function(m, before, hash)
        {
            return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
        } );
    };

    var listify = function( tweet )
    {
        return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username)
        {
            return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
        } );
    };

    var $twitterResultTarget = $( "#twitter_results" );
    
    /* The actual function which is stored in `getTweets`   */
    return function()
    {
        $.getJSON( "http://search.twitter.com/search.json?callback=?&q=superfad", function( data )
        {        
            tweetsLoaded = true;
            $.each( data.results, function( i, item )
            {
                $twitterResultTarget
                    .append( [
                        '<li class="twitter"><img class="twitter_img" src="',
                        item.profile_image_url,
                        '"/>',
                        listify( hashify( linkify( item.text ) ) ),
                        '</li>'
                    ].join( '' ) );
            } );
        } );
    }
}() );

getTweets();