26

How can I setup my regex to test to see if a URL is contained in a block of text in javascript. I cant quite figure out the pattern to use to accomplish this

 var urlpattern = new RegExp( "(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?"

 var txtfield = $('#msg').val() /*this is a textarea*/

 if ( urlpattern.test(txtfield) ){
        //do something about it
 }

EDIT:

So the Pattern I have now works in regex testers for what I need it to do but chrome throws an error

  "Invalid regular expression: /(http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?/: Range out of order in character class"

for the following code:

var urlexp = new RegExp( '(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?' );
3
  • Why do you exclude FTPS?
    – PhiLho
    Dec 31, 2014 at 11:30
  • I really only needed http/https so in my case I couldve left out ftp as well too
    – BillPull
    Jan 27, 2015 at 0:56
  • This is essentially a duplicate of How to replace plain URLs with links?, which explains why regular expressions are a bad idea for this kind of task. Oct 11, 2016 at 3:57

8 Answers 8

71
+50

Though escaping the dash characters (which can have a special meaning as character range specifiers when inside a character class) should work, one other method for taking away their special meaning is putting them at the beginning or the end of the class definition.

In addition, \+ and \@ in a character class are indeed interpreted as + and @ respectively by the JavaScript engine; however, the escapes are not necessary and may confuse someone trying to interpret the regex visually.

I would recommend the following regex for your purposes:

(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?

this can be specified in JavaScript either by passing it into the RegExp constructor (like you did in your example):

var urlPattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?")

or by directly specifying a regex literal, using the // quoting method:

var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/

The RegExp constructor is necessary if you accept a regex as a string (from user input or an AJAX call, for instance), and might be more readable (as it is in this case). I am fairly certain that the // quoting method is more efficient, and is at certain times more readable. Both work.

I tested your original and this modification using Chrome both on <JSFiddle> and on <RegexLib.com>, using the Client-Side regex engine (browser) and specifically selecting JavaScript. While the first one fails with the error you stated, my suggested modification succeeds. If I remove the h from the http in the source, it fails to match, as it should!

Edit

As noted by @noa in the comments, the expression above will not match local network (non-internet) servers or any other servers accessed with a single word (e.g. http://localhost/... or https://sharepoint-test-server/...). If matching this type of url is desired (which it may or may not be), the following might be more appropriate:

(http|ftp|https)://[\w-]+(\.[\w-]+)*([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?

#------changed----here-------------^

<End Edit>

Finally, an excellent resource that taught me 90% of what I know about regex is Regular-Expressions.info - I highly recommend it if you want to learn regex (both what it can do and what it can't)!

10
  • regular-expressions-info is broken. Put "dot" instead of a dash in href.
    – esengineer
    Oct 10, 2012 at 7:25
  • one more thing: the correct syntax would be ... = new RegExp(...) instead of ... = new Regexp(...). Thanks anyway for the great answer!
    – zaphod1984
    Nov 24, 2012 at 7:05
  • 1
    This breaks on URLs with no dots in the host. For example, http://localhost/foo/bar.txt. To fix it, change (\.[\w-]+)+ to (\.[\w-]+)*. Aug 10, 2014 at 20:40
  • 1
    The question is general, and this answer has gotten a lot of recognition. Someone (not the OP) used this code, and it caused a real bug in some code I was debugging… so breaks isn't entirely relative. It's worth making the answer as canonical as possible. Aug 29, 2014 at 4:49
  • 1
    I highly recommend this as a supplemental resource: mathiasbynens.be/demo/url-regex
    – eremzeit
    Feb 12, 2016 at 9:04
4

Complete Multi URL Pattern.

UPDATED: Nov. 2020, April & June 2021 (Thanks commenters)

Matches all URI or URL in a string! Also extracts the protocol, domain, path, query and hash. ([a-z0-9-]+\:\/+)([^\/\s]+)([a-z0-9\-@\^=%&;\/~\+]*)[\?]?([^ \#\r\n]*)#?([^ \#\r\n]*)

https://regex101.com/r/jO8bC4/56

Example JS code with output - every URL is turned into a 5-part array of its 'parts' (protocol, host, path, query, and hash)

var re = /([a-z0-9-]+\:\/+)([^\/\s]+)([a-z0-9\-@\^=%&;\/~\+]*)[\?]?([^ \#\r\n]*)#?([^ \#\r\n]*)/mig;
var str = 'Bob: Hey there, have you checked https://www.facebook.com ?\n(ignore) https://github.com/justsml?tab=activity#top (ignore this too)';
var m;

while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    console.log(m);
}

Will give you the following:

["https://www.facebook.com",
  "https://",
  "www.facebook.com",
  "",
  "",
  ""
]

["https://github.com/justsml?tab=activity#top",
  "https://",
  "github.com",
  "/justsml",
  "tab=activity",
  "top"
]
7
  • 1
    this is a super clever way to do it +1
    – David
    Jan 8, 2016 at 3:46
  • Your regex is not differentiating between a block of text and URL. Check here
    – user2705585
    Jan 21, 2016 at 20:10
  • Updated my answer - includes @noob 's suggested string prepended to my example code (so it pulls all url-like strings very reliably - even if there is a colon-prefixed string. uses explicit matching on slashes to delineate the protocol). Also works with smb:///winbox/dfs/ or ipp://printer regex101.com/r/jO8bC4/5
    – Dan Levy
    Jan 28, 2016 at 23:16
  • BAM "a a:// . " returns true with this Regex :/
    – vsync
    Sep 9, 2020 at 10:28
  • Hey @vsync - thanks, it now requires 1 or more chars for the domain!
    – Dan Levy
    Apr 20, 2021 at 0:58
3

You have to escape the backslash when you are using new RegExp.

Also you can put the dash - at the end of character class to avoid escaping it.

&amp; inside a character class means & or a or m or p or ; , you just need to put & and ; , a, m and p are already match by \w.

So, your regex becomes:

var urlexp = new RegExp( '(http|ftp|https)://[\\w-]+(\\.[\\w-]+)+([\\w-.,@?^=%&:/~+#-]*[\\w@?^=%&;/~+#-])?' );
1
  • how to extend it to match more than one url?
    – Moj
    Aug 5, 2014 at 14:29
1

try (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?

1
  • When using this I get an error Range out of order in character class"
    – BillPull
    Nov 21, 2011 at 16:32
1

I've cleaned up your regex:

var urlexp = new RegExp('(http|ftp|https)://[a-z0-9\-_]+(\.[a-z0-9\-_]+)+([a-z0-9\-\.,@\?^=%&;:/~\+#]*[a-z0-9\-@\?^=%&;/~\+#])?', 'i');

Tested and works just fine ;)

2
  • how to extend it to match more than one url? –
    – Moj
    Aug 5, 2014 at 14:44
  • Add "global" modifier (g): new RegExp(.., 'gi') Aug 7, 2014 at 9:51
1

Try this general regex for many URL format

/(([A-Za-z]{3,9})://)?([-;:&=\+\$,\w]+@{1})?(([-A-Za-z0-9]+\.)+[A-Za-z]{2,3})(:\d+)?((/[-\+~%/\.\w]+)?/?([&?][-\+=&;%@\.\w]+)?(#[\w]+)?)?/g
0

The trouble is that the "-" in the character class (the brackets) is being parsed as a range: [a-z] means "any character between a and z." As Vini-T suggested, you need to escape the "-" characters in the character classes, using a backslash.

0

try this worked for me

/^((ftp|http[s]?):\/\/)?(www\.)([a-z0-9]+)\.[a-z]{2,5}(\.[a-z]{2})?$/

that is so simple and understandable

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.