How to parse a URL?

by

EDIT (2020): In modern browsers, you can use the built-in URL Web API.

https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

var url = new URL("http://www.somesite.se/blah/sdgsdgsdgs");
var pathname = url.pathname; // returns /blah/sdgsdgsdgs

Instead of relying on a potentially unreliable* regex, you should instead use the built-in URL parser that the JavaScript DOM API provides:

var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";

That’s all you need to do to parse the URL. Everything else is just accessing the parsed values:

url.protocol; //(http:)
url.hostname; //(www.example.com)
url.pathname; //(/some/path)
url.search; // (?name=value)
url.hash; //(#anchor)

In this case, if you’re looking for /blah/sdgsdgsdgs, you’d access it with url.pathname

Basically, you’re just creating a link (technically, anchor element) in JavaScript, and then you can make calls to the parsed pieces directly. (Since you’re not adding it to the DOM, it doesn’t add any invisible links anywhere.) It’s accessed in the same way that values on the location object are.

(Inspired by this wonderful answer.)

EDIT: An important note: it appears that Internet Explorer has a bug where it omits the leading slash on the pathname attribute on objects like this. You could normalize it by doing something like:

 url.pathname = url.pathname.replace(/(^\/?)/,"/");

Note:
*: I say “potentially unreliable”, since it can be tempting to try to build or find an all-encompassing URL parser, but there are many, many conditions, edge cases and forgiving parsing techniques that might not be considered or properly supported; browsers are probably best at implementing (since parsing URLs is critical to their proper operation) this logic, so we should keep it simple and leave it to them.

More Related Contents:

  1. Find list of strings that matches a pattern that start with a special character « and end with a special character »
  2. Remove text between two parenthesis, if two more parenthesis [closed]
  3. How to replace plain URLs with links?
  4. Regular expression to get a string between two strings in Javascript
  5. Validate phone number with JavaScript
  6. Detect URLs in text with JavaScript
  7. What is the meaning of the ‘g’ flag in regular expressions?
  8. What is the difference between RegExp’s exec() function and String’s match() function?
  9. Is there a version of JavaScript’s String.indexOf() that allows for regular expressions?
  10. Remove HTML Tags in Javascript with Regex
  11. Remove whitespace and line breaks between HTML elements using jQuery
  12. Remove HTML comments with Regex, in Javascript
  13. How to replace last occurrence of characters in a string using javascript
  14. Validating user’s UTF-8 name in Javascript
  15. regular expression to match exactly 5 digits
  16. Regex for number with decimals and thousand separator
  17. escaping question mark in regex javascript
  18. Javascript regex (negative) lookbehind not working in firefox
  19. JavaScript/regex: Remove text between parentheses
  20. JavaScript Regex, where to use escape characters?
  21. javascript regex for password containing at least 8 characters, 1 number, 1 upper and 1 lowercase [duplicate]
  22. JavaScript Regular Expression Email Validation [duplicate]
  23. Extract image src from a string
  24. How to prevent invalid characters from being typed into input fields
  25. How to convert “camelCase” to “Camel Case”?
  26. Regex for parsing single key: values out of JSON in Javascript
  27. What’s the correct regex range for javascript’s regexes to match all the non word characters in any script?
  28. javascript split string by space, but ignore space in quotes (notice not to split by the colon too)
  29. Mask US phone number string with JavaScript
  30. Convert string to Pascal Case (aka UpperCamelCase) in Javascript

Leave a Comment