Question

I would really love some help on this one.

What I have is a twitter JSON request and everything works great but I would like to style the mentions and hashtags appropriately as at the moment the whole tweet just looks the same and I think making this change would vastly improve it.

At present I tried to change the hashtags but it seems to be causing an error, I think it’s because I’m using $(this).html(linkHashtags($(this).html())); when it’s not html I’m reading.

The next stage would just be to do the same for @ (mentions).

Here is the code at present:

var url='http://search.twitter.com/search.json?q=';
var query='%23HASHTAG';
var options='&result_type=recent&rpp=4&page=1&callback=?';
var html='<marquee behavior="scroll" scrollamount="1" direction="left">';

$.getJSON(url+query+options,function(json){     
        $.each(json.results,function(i,tweet){

             $(this).html(linkHashtags($(this).html()));

             html+='<span class="tweet"><img class="profile-pic" src="'+tweet.profile_image_url+'" width="40" height="40" /><span class="tweeter">'+tweet.from_user+'</span>:&nbsp;'+tweet.text+ ' <i>' + daysAgo(tweet.created_at) + '</i></span>';
        });

        html += '</marquee>';
       // Now replace the <p> with our <marquee>-element
       $('.twitter p').replaceWith(html);
       $('div.twitter marquee').marquee();
});

var linkHashtags = function (text) {
return text.replace(
    hashtag_regexp,
    '<a class="hashtag" href="http://twitter.com/#search?q=$1">#$1</a>'
    );
} 

Answer 1

Use twitter-text-js:

twttr.txt.autoLink("link @user, please #request");

Example: http://jsfiddle.net/44DZ9/