Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

jQuery Tweetify Text

Function

$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
				.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
				.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
		);
	});
	return $(this);
}

Usage

$("p").tweetify();

Before

<p>@seanhood have you seen this http://icanhascheezburger.com/ #lol</p>

After

<p><a href="http://twitter.com/seanhood">@seanhood</a> have you seen this
<a href="http://icanhascheezburger.com/">http://icanhascheezburger.com/</a>
<a href="http://search.twitter.com/search?q=%23lol">#lol</a></p>

Reference URL

Comments

  1. Didn’t work for me, :(

  2. Jamie
    Permalink to comment#

    Works for me! Thanks:)

    Using:
    Mac OSX Snow Leopard
    Coda 1.6.4

  3. Mike
    Permalink to comment#

    Works good for me too, thanks Chris!

  4. Mike
    Permalink to comment#

    How would you hide the ‘http://’ part of the URL from the display text?

    I can’t seem to find a way to replace or remove specific text inside an <a> tag.

    Any help appreciated!

  5. Permalink to comment#

    Perhaps add

    .replace(/(^|\s)$(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%24$2" rel="nofollow">#$27</a>')
    • I were just about to reply that it sound stupid because Google dosent follows javascript links – but thats not true, they DO actually have the ability to follow javascript links:

  6. Ramon
    Permalink to comment#

    Also very useable for making it happen in PHP! :)

    Thanks.

  7. Permalink to comment#

    Hey guys,

    afaik, I must suggest that the twitter URI should changed to new api, for example “https://twitter.com/#!/search/%23$2″ for your href attributes with linked “#$2″.

    The complete function for a twitter-hash will be:
    .replace(/(^|\s)#(\w+)/g,’$1#$2‘)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```