Question

I am pulling tweets using a twitter API and assigning it into a variable. LIke so.

        self.tweets = $.map(data.results, function(tweet){
                return{
                    author: tweet.from_user,
                    url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str,
                    image: tweet.profile_image_url,
                    tweet: tweet.text
                };
            });

I works for me. and I am appending the tweet to HTML. the text is like so..

 @drwarwick Hi David! Looking forward to catching up with you, but may not get in there today due to work commitments...

What I want to do now is wrap the @drwarwick into a @drwarwick so that I can style and link it accordingly. How do I find uisng jquery any such words in the tweets. Thanks.

EDIT>>>>>

something like stackoverflow is doing above. It has changed the color of the text.

Answer 1

I just wrote a helper method to do that.

function HighLight(input)
{
    var output="";
    var items=input.split(" ");
    $.each(items,function(index,item){
       var word=items[index];
       if(word.match("^@"))
       {
           word="<span class='highlightSpan'>"+word+"</span>";  
       }                         
       output+=word+" ";
    });    
    return output;
}

Working example : http://jsfiddle.net/ZSafX/27/

You can change your code to include that like this

    self.tweets = $.map(data.results, function(tweet){
            return{
                author: tweet.from_user,
                url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str,
                image: tweet.profile_image_url,
                tweet: HighLight(tweet.text)
            };
        });