JSFiddle - React, Tailwind, and code Playground

HTML

<p id="tweet-container"></p>

JavaScript

var tweet = 'joined @BundleHunt for a chance to win the 2010 Mega Bundle! http://bundlehunt.com * Only 10 Days Left! URL containing an at sign: http://www.last.fm/event/1196311+Live+@+Public+Assembly. This should not work: <scr'+'ipt>alert(document.cookie)</scr'+'ipt>';

var combinedRegex = /@\w+|(?:https?|ftp):\/\/.*?\..*?(?=\W?\s)/gi,
    container = $('#tweet-container');

var result, prevLastIndex = 0;
combinedRegex.lastIndex = 0;
while((result = combinedRegex.exec(tweet))) {
    // Append the text coming before the matched entity
    container.append($('<span/>').text(tweet.slice(prevLastIndex, result.index)));
    if(result[0].slice(0, 1) == "@") {
        // Twitter username was matched
        container.append($('<a/>')
            // .slice(1) cuts off the first character (i.e. "@")
            .attr('href', 'http://twitter.com/' + encodeURIComponent(result[0].slice(1)))
            .text(result[0])
        );
    } else {
        // URL was matched
        container.append($('<a/>')
            .attr('href', result[0])
            .text(result[0])
        );
    }
    // prevLastIndex will point to the next plain text character to be added
    prevLastIndex = combinedRegex.lastIndex;
}
// Append last plain text part of tweet
container.append($('<span/>').text(tweet.slice(prevLastIndex)));