🔗URL & UTM

Parse Query String Parameters

Extract and parse query string parameters from URLs into key-value pairs

Explanation

Convert URL query strings into JavaScript objects or maps for easy access and manipulation.

Examples

Parse simple query

Input

?utm_source=google&utm_medium=cpc

Output

{ utm_source: "google", utm_medium: "cpc" }

Parse with special chars

Input

?name=John%20Doe&email=test%40example.com

Output

{ name: "John Doe", email: "test@example.com" }

Code Examples

JavaScript (Modern)

// Modern approach using URLSearchParams
function parseQueryString(url) {
  const urlObj = new URL(url);
  const params = {};
  
  urlObj.searchParams.forEach((value, key) => {
    params[key] = value;
  });
  
  return params;
}

// From current page URL
function getCurrentQueryParams() {
  const params = {};
  const searchParams = new URLSearchParams(window.location.search);
  
  searchParams.forEach((value, key) => {
    params[key] = value;
  });
  
  return params;
}

// Get specific parameter
function getQueryParam(name) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(name);
}

// Usage
const url = 'https://example.com?utm_source=google&utm_campaign=test';
const params = parseQueryString(url);
// Result: { utm_source: 'google', utm_campaign: 'test' }

const utmSource = getQueryParam('utm_source');
// Result: 'google'

JavaScript (Legacy)

// Legacy approach (manual parsing)
function parseQueryStringLegacy(queryString) {
  const params = {};
  
  // Remove leading ?
  const query = queryString.replace(/^\?/, '');
  
  // Split by &
  query.split('&').forEach(pair => {
    const [key, value] = pair.split('=');
    if (key) {
      params[decodeURIComponent(key)] = 
        decodeURIComponent(value || '');
    }
  });
  
  return params;
}

Try it Now

Open in URL Parser

💡 Tips

URLSearchParams automatically decodes values
Use get() for single values, getAll() for arrays
Check for parameter existence with has()
Remember to handle missing parameters gracefully
Query string can be accessed via window.location.search

⚠️ Common Pitfalls

Duplicate parameter names return only first value
URLSearchParams not available in IE11
Empty values (foo=) vs missing values (foo)
Hash fragment is separate from query string