Get a free trial // Grow your CSS skills // Land your dream job

jQuery Tweetify Text

Last updated on:


$.fn.tweetify = function() {
	this.each(function() {
				.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="$2">#$2</a>')
				.replace(/(^|\s)@(\w+)/g,'$1<a href="$2">@$2</a>')
	return $(this);




<p>@seanhood have you seen this #lol</p>


<p><a href="">@seanhood</a> have you seen this
<a href=""></a>
<a href="">#lol</a></p>

Reference URL


  1. Montana Flynn
    Permalink to comment#

    Didn’t work for me, :(

  2. Jamie
    Permalink to comment#

    Works for me! Thanks:)

    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. Jack
    Permalink to comment#

    Perhaps add

    .replace(/(^|\s)$(\w+)/g,'$1<a href="$2" rel="nofollow">#$27</a>')
    • Jimmy Rittenborg
      Permalink to comment#

      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! :)


  7. m3tr0n
    Permalink to comment#

    Hey guys,

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

    The complete function for a twitter-hash will be:

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:

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed