Find twitter hashtags using jQuery, and apply a link

4 Views

I’d like to start this off by saying I’m hardly a pro at jQuery, and this seems like a non-standard question.

Basically I’m making a blog in wordpress, and incorporated into the loop it shows tweets from my twitter profile. I would like to know how to select the hashtags from these tweets (ex. #foo) and then apply a html link to the hashtag as follows…

Read More
<a class="hashtag" href="http://twitter.com/#search?q=foo">#foo</a>

The link has to also place the value of the hashtag (minus the #) into the #search?q= part of the link.

Is this possible and if so how would I go about doing this?

Thanks,
Charlie Ryan

EDIT:

The hashtag #foo will be part of a h1, with no tags differentiating the one word such as 

<h1>Lorem ipsum dolor sit amet #foo et adipiscing</h1>

So basically I need to find all strings begining with # and replace them with the link as seen above.

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. You would craft a regular expression to find those hashtags and replace them with a link, using backreferences to get the matching tag.

    hashtag_regexp = /#([a-zA-Z0-9]+)/g;

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

$(document).ready(function(){
    $('p').each(function() {
        $(this).html(linkHashtags($(this).html()));
    });
});

    Edit: I’ve moved the relevant code inside a function that accepts a string with hashtags, and returns the same string with the tags replaced by links. It doesn’t rely on jQuery that way.

    $('p').html(linkHashtags($('p').html()));

    You just pass it an elements html value and replace the value by the result of calling linkHashtags. One could probably write a jQuery plugin to make this easier to use.

    Example

    That regular expression might need some work, I’m not sure which characters are allowed to be used inside a hashtag, but I think you get the idea.

  2. You don’t need to mess around with complex regexs. When you request a user timeline from the Twitter API with /statuses/user_timeline, you can set a parameter called include_entities to true. See this page of documentation:

    http://dev.twitter.com/doc/get/statuses/user_timeline

    This will add a JSON object to every tweet called an entity. The entity will contain all the details about every hashtag in the tweet all neatly parsed out for you. You will get the text of the hashtag, and its starting and stopping positions in the tweet. You can just substitute a linkified version of the tag back into the text before displaying it.

  3. Why are you want to doing this with jQuery? Use a WordPress Plugin: Twittify!
    This plugin simply turns Twitter @usernames and `#hashtags into links to the related place on Twitter.

    You always should reduce changes in the DOM to a minimum.