Search code examples
javascriptregexparsingusernametoken

@username Regular Expression for social media with JavaScript

I am relatively new to using Regular Expressions with JavaScript and come across a particular situation with regards to the '@' username pattern that has given me about 3 hours of trouble.

I would like to replicate the @username pattern found on social media text fields on websites such as Facebook and Twitter. (I understand that they parse tokenized macros but I would like a pure RegEx version).

I have attached an image of the closest pattern that I have achieved, however I will also type this in order to make it easier for anyone to copy and paste into their own RegEx pattern checker.

As you can see, the @ symbol aught to catch all subsequent alpha characters and nothing preceding that @ symbol and be terminated by a space. There is a special case where a URL that contains an @ symbol should be ignored. (As illustrated in the image) and the @ symbol could be used at the very start of the textfield and in this case the handle should be parsed.

Clearly, my existing pattern is collecting the preceding character to the @ symbol which is incorrect. Any help would be fantastic.

RegEx101 example (with highlights)

RegEx101 example

RegEx that is not working

/(^^|[^\/])(@[A-Za-z0-9_.]{3,25})/gm

Text version for copy+paste convenience

@test testing
 @test testing
testing ,@test
https://youtube.com/@test

I tried multiple combinations of patterns, over 3 hours, to try to isolate @handle style tags as seen in popular social networks. I expected to be able to isolate only the portion of the patter that contain a single @ deliminated username. I expected that I could ignore this patter where it is part of a URL.

My actual results cause the preceding character to be collected and added to the final string which is incorrect.

Solution

  • It sounds like you want a positive lookbehind

    (?<=YOUR_REGEX)

    /(?<=^|[^\/])(@[A-Za-z0-9_.]{3,25})/gm

    enter image description here