Santiago
Santiago

Reputation: 2455

How to linkify @usernames and #hashtags with jquery.linkify Plugin

I'm using this jquery plugin: https://github.com/maranomynet/linkify/blob/master/1.0/jquery.linkify-1.0.js

With this REGEX plugins I'm trying to linkify @usernames and #hashtags...

  linkify.plugins = {
  tUser: {
      re: /(^|\s)@(\w+)/gi,
      tmpl: '$1@<a href="http://domain.com/$2">$2</a>'
  },
  tHashtag: {
      re: /(^|["'(]|&lt;|\s)(#.+?)((?:[:?]|\.+)?(?:\s|$)|&gt;|[)"',])/gi,
      tmpl: function (match, pre, hashTag, post) {
            return pre+'<a href="http://domain.com/search.php?q='+ encodeURIComponent(hashTag) +'">'+hashTag+'</a>'+post;
      }
  }
};

... but I'm having some troubles with odd combinations:

(In BOLD what should be linkified but is not)

#hash #hash) (#hash) /#hash

@user @user) (@user) /@user

Any idea on how could I fix the REGEX to match this variations?

Thanks!

Upvotes: 1

Views: 1731

Answers (1)

Dave
Dave

Reputation: 4694

I'm not very familiar with linkify, but I'll give this a shot.

The problem with the first regex (@user) is that it isn't matching because it requires leading whitespace or newline -- that's the (^|\s) part. As for the #hash regex, well... that seems unnecessarily complex. Try the following:

linkify.plugins = {
  tUser: {
    re: /(^|\s|[^\w\d])@(\w+)/gi,
    tmpl: '$1@<a href="http://domain.com/$2">$2</a>'
  },
  tHashtag: {
    re: /(^|\s|[^\w\d])#(\w+)/gi,
    tmpl: function (match, pre, hashTag) {
            return pre+'<a href="http://domain.com/search.php?q='+
                   encodeURIComponent(hashTag) +'">#'+hashTag+'</a>';
    }
  }
};

This will match either the @user or #hash so long as they are preceded by a newline, whitespace or a non-word, non-digit character (not a-z, A-Z or 0-9). So your parenthesis won't interfere, but most email addresses won't be picked up either.

Note that the hash symbol won't be included on your search on the linkified hash-tags either.

Upvotes: 3

Related Questions