RegExp for Javascript to get a substring

Question

I would like to parse some plain text that I got from the Twitter API. What I need to do is basically search through a tweet to find a "@" character followed by some text and replace the plain text with an anchor linked to that text. For example:

Take the tweet plain text: "@flintzke this is a test"

and use a Regular expression to turn it into:

<a href='www.twitter.com/flintzke'>@flintzke</a> this is a test

my guess was to use this kind of function:

function getUsernameLink(text) {
var exp = /^[@][a-zA-Z0-9_!@#%&*]*[\s]$/ig;
return text.replace(exp, "<a href='https://twitter.com/$1'>$1</a>");
}

my objective was to find an expression that found a single word in a string, text, that starts with "@" and ends with a whitespace

do you want the rest of the tweet placed into your result string? — hyleaus
– hyleaus, Commented Nov 30, 2012 at 0:37

Martin Ender · Accepted Answer · 2012-11-30 00:39:10Z

2

I think you have tried a bit to hard ;). Firstly the anchors ^ and $ mark the beginning and end of the string (not the beginning and end of the match or something - which I suppose you assumed). Then you use $1 but that corresponds to the first capture (the first set of parentheses - which you don't have). Either add parentheses around your match or use $&. And lastly, \S represents a non-whitespace character. So why not just match as many non-whitespace characters as possible?

exp = /@(\S*)/g;
return text.replace(exp, "<a href='https://twitter.com/$1'>@$1</a>");

answered Nov 30, 2012 at 0:39

Martin Ender

44.4k11 gold badges93 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Hintzke Over a year ago

ohh yes you are right I thought ^ and $ meant beginning of the matched string not the entire string. This looks much better! Is it possible to LOOK for the @ at the beginning of the word but not actually pull it into the $1? thanks alot

Martin Ender Over a year ago

@MattHintzke sure. Make use of capturing ;). You are free to place the parentheses wherever you want. See my edit.

Matt Hintzke Over a year ago

ohhh so the parenthesis is what indicates the actual "Capture" of the string? that is great! thanks

Martin Ender Over a year ago

@MattHintzke yes, that's what I meant. Sorry if that was unclear. Here is some further reading on the matter.

Mehdi Karamosly · Accepted Answer · 2012-11-30 23:37:37Z

1

Try this one :

text.replace(/\@(\w+)/g,"<a href='https://twitter.com/$1'>@$1</a>");

edited Nov 30, 2012 at 23:37

answered Nov 30, 2012 at 0:54

Mehdi Karamosly

5,4382 gold badges34 silver badges50 bronze badges

12 Comments

Martin Ender Over a year ago

Not only that this will not work if the last word in the string is preceded by @, it will also remove the space between the linked word and the one after that.

Martin Ender Over a year ago

Yup. Now only the first one still applies ;). It will still not work for a @name at the end of the string.

Mehdi Karamosly Over a year ago

The below would satisfy your 1 st point but what @MattHintzke asked for was not to match a pattern at the end of the string. text.replace(/\@(\w+)/g,"<a href='https://twitter.com/$1'>@$1</a> ");

Martin Ender Over a year ago

His request was "What I need to do is basically search through a tweet to find a "@" character followed by some text and replace the plain text with an anchor linked to that text." He doesn't make any assumption about the position. I believe a solution should try to capture the OP's intent and not only work for the few specific examples he gives.

Mehdi Karamosly Over a year ago

Then my last comment should satisfy his needs except that it will add a space at the end, if the pattern found at the end of the string. Thanks

|

Collectives™ on Stack Overflow

RegExp for Javascript to get a substring

2 Answers 2

4 Comments

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related