Get the values from the "GET" parameters (JavaScript)

javascript

url-parsing

url-search-params

polyfills

byAnton Shumikhin·Sep 23, 2024

Want to extract values from a URL's query string quickly? The URLSearchParams API is your secret weapon:

const params = new URLSearchParams(location.search);
const value = params.get('key'); // Replace 'key' with your query para-meter(Not barometer 😜)

Efficient URL parsing with modern APIs

To parse query strings efficiently, URL and URLSearchParams are your trusty allies. They are the route markers on your express highway to decoding parameters:

// Your compass to point to full URL
const url = new URL(location.href);

// Eureka! Found the 'c' parameter
const eureka = url.searchParams.get("c");

Open your box of goodies in Node.js too - consistency across client-side and server-side!

Befriend older browsers

When dealing with legacy environments, show some love with polyfills. Make your code roll smoothly on old tracks, with webcomponents/URL and URLSearchParams:

<script src="https://polyfill.io/v3/polyfill.min.js?features=URL"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=URLSearchParams"></script>

Handy trick for the current page

To extract parameters from the current page's URL like a pro, try this:

const rawQuery = window.location.search.substring(1);

Don't forget your friend, decodeURIComponent. It'll ensure encoded characters speak their mother language.

Template for query string parsing

When URLSearchParams isn't at your service, craft a function, say parse_query_string. This function will be your best pal, turning a mess into a tidy structured object:

function parse_query_string(query) {
  let params = {};
  // Replace '+' with ' ', then split the query at '&'
  query.replace(/\+/g, ' ').split('&').forEach(pair => {
    let [key, value] = pair.split('=').map(decodeURIComponent);
    // Handle multiple values per key, because who doesn't have multiple issues? 😂
    if (params[key]) {
      !Array.isArray(params[key]) ? params[key] = [params[key]] : null;
      params[key].push(value);
    } else {
      params[key] = value;
    }
  });
  return params;
}

Regex: A thread in the labyrinth

Regular expressions are your trustworthy thread in the labyrinth of URL parameters. Execute and validate with rigour and prudence:

const regexPattern = new RegExp('param=([^&]+)', 'g');
let match;
while (match = regexPattern.exec(rawQuery)) {
  const [fullMatch, capturedValue] = match;
}

Let captured || 'myDefaultValue' handle empty capture groups - a safety net in your circus act.

Cross-browser compatibility: Aiming for the bullseye

Check for browser's cheerleaders at "caniuse.com". Get on board with polyfills or alternatives based off browser support for URLSearchParams.

Never underestimate testing

Before you hit 'Go live', arm yourself with a variety of URLs. Ensure your code behaves well without the constraints of the current page URL:

// Replace 'location.href' with your weapon of choice
const testing = 'https://example.com/?param1=value1&param2=value2';
const params = new URLSearchParams(new URL(testURL).search);