How can I replace any word within a string that starts with an '@' symbol like Twitter does, in Javascript/JQuery?

Question

I'm trying to make any '@sometext' an HTML link where 'sometext' is also appended to a url. i.e. '@sometext' becomes a link to 'http://someurl.com/sometext'. But so it can change because the link will be different everytime depending on what 'sometext' is. I'm writing this in javascript and jquery. I'm trying to recreate links similar to that on Twitter when someone inserts an @username that links back to that person's profile page.

I already have code to locate urls within the text and make them HTML links. But I don't have anything written for what I'm trying to do now with the '@' symbol. I haven't been able to find anything to help me.

This is the code I have to make urls HTML links:

 var message = this.text;

 var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;

 message = message.replace(exp,"<a href='$1' target='_new'>$1</a>");

 resultDiv += message + "</div>";

Okay so this is how my code looks now and it is working except that for some of the @sometext links there is a ':' directly following the string, @sometext: and therefore the link is a broken link. How might I remove or ignore the ':' when creating the url to be the HTML link?

$(data.results).each(function() {

var userLink = "<a href=\"http://twitter.com/" + this.from_user + "\">";

var replyTo = this.to_user;

var resultDiv = "<div class=\"finalResult\">";

resultDiv += "<fieldset class=\"tweetReturn\" style = \"width: 75%;\">";

resultDiv += "<div><div id=\"userImage\"><img src=\"" + this.profile_image_url + "\" height=\"48px\" width=\"48px\"/></div>";

resultDiv += "<div id=\"userMessage\"><strong>" + userLink + this.from_user + "</a></strong> &nbsp;";

var message = this.text;

var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;

message = message.replace(exp,"<a href='$1'>$1</a>");

message = message.replace( /(^|\s)@(\S+)/g, '$1@<a href=\"http://twitter.com/$2\"&gt;$2&lt;/a&gt;');                                             
message = message.replace( /(^|\s)#(\S+)/g, '$1<a href=\"http://search.twitter.com/search?q=%23\$2\"&gt;#$2&lt;/a&gt;');

resultDiv += message + "</div>";

resultDiv += "<div id=\"twitterLink\"><a href=\"http://www.twitter.com\"&gt;&lt;img src=\"http://twitter-badges.s3.amazonaws.com/twitter-b.png\" alt=\"Visit Twitter\"/></a></div>"

resultDiv += "<div id=\"timestamp\">" + this.created_at + "</div>";

resultDiv += "</div></div></fieldset>";

resultDiv += '</div><br />';


$("#displayResults").append(resultDiv);     

});

Answer 1

I'm guessing you want something like this:

function makeLinks(text)
{
    text = text.replace(/@(\w+)\b/, '<a href="http://www.someurl.com/$1"&gt;@$1&lt;/a&gt;');
    return text;
}

Answer 2

This should work

 function convertAts( text )
 {
   return text.replace( /(^|\s)@(\S+)/g, '$1<a href="http://someurl.com/$2"&gt;@$2&lt;/a&gt;');
 }

This will only replace @something when it is alone and not right next to something else (e.g. somethingelse@something)

Answer 3

Checkout this entry by Twitter engineer Dustin Diaz for linking up links, @ messages, and hashes.

var ify = function() {
  return {
    "link": function(t) {
      return t.replace(/(^|\s+)(https*\:\/\/\S+[^\.\s+])/g, function(m, m1, link) {
        return m1 + '<a href=' + link + '>' + ((link.length > 25) ? link.substr(0, 24) + '...' : link) + '</a>';
      });
    },
    "at": function(t) {
      return t.replace(/(^|\s+)\@([a-zA-Z0-9_]{1,15})/g, function(m, m1, m2) {
        return m1 + '@<a href="http://twitter.com/' + m2 + '">' + m2 + '</a>';
      });
    },
    "hash": function(t) {
      return t.replace(/(^|\s+)\#([a-zA-Z0-9_]+)/g, function(m, m1, m2) {
        return m1 + '#<a href="http://search.twitter.com/search?q=%23' + m2 + '">' + m2 + '</a>';
      });
    },
    "clean": function(tweet) {
      return this.hash(this.at(this.link(tweet)));
    }
  };
}();