Develop Reference

Parse search params in relative URL in Javascript

I have a relative URL, something like /a/b?someParam=cccc
I want to extract the value of the parameter. One alternative is to do (new URL(myUri, 'http://example.com')).searchParams.get('someParam'). It is nice because it uses the built-in functions from the browser and it is going to be safe in cases when the parameter of the url is encoded.
However, it depends on a random base of the url http://example.com. Is there a way to parse a URL without a base? Or to extract the search params?

You could take everything after the ? and pass it directly to URLSearchParams.
const getParamsFromURI = ( uri ) => {
// Get everything after the `?`
const [ , paramString ] = uri.split( '?' );
// Return parameters
return new URLSearchParams( paramString );
};
const params = getParamsFromURI( '/a/b?someParam=cccc' );
console.log( params.get( 'someParam' ) );
Or if you want to use the URL constructor you can get a base from window.location.origin
const getParamsFromURI = ( uri ) => {
// Create url with base
const base = window.location.origin; // Could also be a fixed value e.g. http://example.com
const url = new URL( uri, base );
// Return parameters
return url.searchParams;
};
const params = getParamsFromURI( '/a/b?someParam=cccc' );
console.log( params.get( 'someParam' ) );

Try this:
const paramString = "/a/b?someParam=cccc".split("?")[1];
const params = new URLSearchParams(paramString);
const result = Object.fromEntries(params.entries());
console.log(result);

You could manipulate the string like this
var test = "/a/b?someParam=cccc&someotherparam=bbb";
var params = test.split('?')[1].split('&').map( (e) => {
let temp = e.split('=');
let rObj = {};
rObj[temp[0]] = temp[1];
return rObj;
} );
console.log(params);
At first you split the string to two segments (before and after "?"). Then you split again the second part by the "&" symbol to generate an array of strings.
In the end you map the array to generate an object with keys and values.
I hope the helps.
EDIT
If you want to use the method URLSearchParams you could do it like this
var test = "/a/b?someParam=cccc&someotherparam=bbb";
var params = new URLSearchParams(test.split('?')[1]);
console.log(params.get("someParam"));

var url_string = "/a/b?someParam=cccc";
function getParam( name, url ) {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
console.log(getParam('someParam', url_string))

I want to add a countdown to a webpage using an parameter from a link

We are using niftyimages to add countdowns on our emails and would like to use a countdown on our webpage. We would like to make it personalized to the individual when they click on a link from the email to the landing page.
So if we have a link: www.webpage.com?dt=2021-06-01
I tried this code:
function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// set parameter name and value (use 'true' if empty)
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
// if the paramName ends with square brackets, e.g. colors[] or colors[2]
if (paramName.match(/\[(\d+)?\]$/)) {
// create key if it doesn't exist
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];
// if it's an indexed array e.g. colors[2]
if (paramName.match(/\[\d+\]$/)) {
// get the index value and add the entry at the appropriate position
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
// otherwise add the value to the end of the array
obj[key].push(paramValue);
}
} else {
// we're dealing with a string
if (!obj[paramName]) {
// if it doesn't exist, create property
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
// if property does exist and it's a string, convert it to an array
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
// otherwise add the property
obj[paramName].push(paramValue);
}
}
}
}
return obj;
}
console.log(getAllUrlParams("https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd"));
The image from niftyimages is <img src="https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd" />
I've isolated dt=2021-06-01, what do I do to replace the "dt=2021-07-21" part in the image url?

Just to keep your code uber simple you could add an id to your img tag like this:
<img id="niftyImg" src="nifty.com?dt=2021-05-02" />
and then do something like this for your JS:
document.addEventListener("DOMContentLoaded", function(event){
var url = new URL(window.location.href);
var dt = url.searchParams.get("dt");
var element = document.getElementById("niftyImg");
var regex = /[0-9]+-[0-9]+-[0-9]+/gm;
element.src = element.src.replace(regex, dt);
});
What this does is waits for the DOM to finish loading then grabs the query parameter off the url, finds your image tag on the page and replaces the date in your src attribute with the one in the url. There's probably slicker ways of doing the regex in case you might have something other than a date there but this will likely get you in the ballpark of what you're trying to do. There may be a flash of the image on page load of the old date but then once the javascript executes the image will update to the new date. If you don't want that flash you would want to do something server-side before the page is rendered if that's an option.

How about using replace and template ${literals}.
function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// set parameter name and value (use 'true' if empty)
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
// if the paramName ends with square brackets, e.g. colors[] or colors[2]
if (paramName.match(/\[(\d+)?\]$/)) {
// create key if it doesn't exist
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];
// if it's an indexed array e.g. colors[2]
if (paramName.match(/\[\d+\]$/)) {
// get the index value and add the entry at the appropriate position
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
// otherwise add the value to the end of the array
obj[key].push(paramValue);
}
} else {
// we're dealing with a string
if (!obj[paramName]) {
// if it doesn't exist, create property
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
// if property does exist and it's a string, convert it to an array
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
// otherwise add the property
obj[paramName].push(paramValue);
}
}
}
}
return obj;
}
function replace_url_param(url, param, replacement)
{
let params = getAllUrlParams(url);
return url.replace(`${param}=${params[param]}`, `${param}=${replacement}`)
}
let image = document.getElementById('image');
image.addEventListener('mouseover', function() {
image.src = replace_url_param("https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd", 'dt', '2021-06-05');
});
console.log(replace_url_param("https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd", 'dt', '2021-06-05'));
<img src="https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd" id="image">

Just to get started, there are easier things to do. just use the URL API
sample code
var URL_val = "https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd"
, URL_Obj = new URL(URL_val)
;
for (let [name,value] of URL_Obj.searchParams)
{
console.log(`_.name: ${name}, _.val: ${value}`)
}
let dateParam = URL_Obj.searchParams.get('dt')
console.log(`dateParam: ${dateParam}`)

Remove all query string in bulk from url?

We want to remove multiple query string parameters from given url. For example:
If url is:
https://www.example.com?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
and
if query string parameters to be removed are: "so","kms","pn", the output of that function should be:
https://www.example.com?budget=0-&year=0-&sc=-1
We have written following code for this:
var input = "https://www.example.com?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1";
var url = input.replace('?', '');
var removeFilterSet = {"so" : true,"kms" : true,"pn" : true};
var params = url.split("&");
for(var i = params.length ; i-- > 0 ; )
{
if(removeFilterSet[params[i].split("=")[0]])
{
params.splice(i,1);
}
}
alert(params.join("&"));
Is there any better way to remove query string in bulk from url?

One could use a Map for that:
const url = "https://www.example.com?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1";
//divide the url into domain and query
const [domain,query] = url.split("?");
//build a Map out of the query string
const params = new Map(
query.split("&").map(el=>el.split("="))
);
//modification goes here, e.g:
["year","so","sc","pm"].forEach(q => params.delete(q));
/* or to replace a value
params.set("whatever","value")
*/
//build up again:
const result = domain+"?"+[...params].map(el=>el.join("=")).join("&");
Try it

You can use this code that use the most of the split() function to achieve the desired goal:
var input = "https://www.example.com?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1";
var domain = input.split("?")[0];
var queryStrings = input.split("?")[1].split('&');
var removeFilterSet = {"so" : true,"kms" : true,"pn" : true};
var resArray = [];
queryStrings.forEach(function(value, key){
var queryName = value.split('=')[0];
if(!removeFilterSet[queryName]){
resArray.push(value);
}
});
var finalUrl = domain+'?'+resArray.toString().replace(/,/g,'&');
console.log(finalUrl);

Here a solution using Array.prototype.reduce():
let input = "https://www.example.com?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1",
[domain, qs] = input.split('?'),
removeFilterSet = ['so', 'kms', 'pn'],
filtered = qs.split('&').reduce((acc, param) => {
return removeFilterSet.includes(param.split('=')[0]) ?
acc : `${acc}&${param}`;
}, '');
console.log(domain + '?' + filtered);

Yes - use a library rather than try and do anything complicated. I recommend URIJS, which does it like this:
var uri = new URI("https://www.example.com?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1");
uri.removeSearch(["so", "kms", "pn"]);
alert( uri.toString() );
See https://medialize.github.io/URI.js/docs.html#search-remove for details.

Old post but here's my cleaner solution. I'm utilizing the lodash and query-string libraries.
import qs from "query-string";
import _ from "lodash";
let query = qs.parse(location.search);
_.map(query, function(value, key) {
return delete query[key];
});

How to Extract URL content using Rails or Javascript

I have this question its easy to add content to url but how to extract it
http://localhost:3000/pages/wish?url=file:///Users/ruelnopal/Desktop/sitetest/index.html&image=http://zalora-media-live-ph.s3.amazonaws.com/product/89/6948/1.jpg&price=PHP%C2%A0799.00&desc=Polo%20shirt%20with%20contrast%20tip,%20Collared%20neckline,%20Unlined,%20Regular%20fit&title=Pique%20Tipping%20Polo%20Shirt&display=popup
im trying to extract the url, image

Here's a simple implementation:
const queryString = location.search.substring(1) //the part after the "?"
const queryParams = queryString.split('&')
//Creates a mapping of params to values
const query = new Map(queryParams.map(param => param.split('=')))
console.log(query.get('url')) //"file:///Users/ruelnopal/Desktop/sitetest/index.html"
console.log(query.get('image')) //"http://zalora-media-live-ph.s3.amazonaws.com/product/89/6948/1.jpg"

Here's a function that will return all params in the URL
function getUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i=0; i<arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// in case params look like: list[]=thing1&list[]=thing2
var paramNum = undefined;
var paramName = a[0].replace(/\[\d*\]/, function(v) {
paramNum = v.slice(1,-1);
return '';
});
// set parameter value (use 'true' if empty)
var paramValue = typeof(a[1])==='undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
paramValue = paramValue.toLowerCase();
// if parameter name already exists
if (obj[paramName]) {
// convert value to array (if still string)
if (typeof obj[paramName] === 'string') {
obj[paramName] = [obj[paramName]];
}
// if no array index number specified...
if (typeof paramNum === 'undefined') {
// put the value on the end of the array
obj[paramName].push(paramValue);
}
// if array index number specified...
else {
// put the value at that index number
obj[paramName][paramNum] = paramValue;
}
}
// if param name doesn't exist yet, set it
else {
obj[paramName] = paramValue;
}
}
}
return obj;
}

Try using the OpenURI module
require "open-uri"
File.open('my_image.png', 'wb') do |fo|
fo.write open("https://upload.wikimedia.org/wikipedia/commons/5/53/Wikipedia-logo-en-big.png").read
end

Get query string parameters url values with jQuery / Javascript (querystring)

Anyone know of a good way to write a jQuery extension to handle query string parameters? I basically want to extend the jQuery magic ($) function so I can do something like this:
$('?search').val();
Which would give me the value "test" in the following URL: http://www.example.com/index.php?search=test.
I've seen a lot of functions that can do this in jQuery and Javascript, but I actually want to extend jQuery to work exactly as it is shown above. I'm not looking for a jQuery plugin, I'm looking for an extension to the jQuery method.

After years of ugly string parsing, there's a better way: URLSearchParams Let's have a look at how we can use this new API to get values from the location!
//Assuming URL has "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?
post=1234&action=edit&active=1"
UPDATE : IE is not supported
use this function from an answer below instead of URLSearchParams
$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
}
console.log($.urlParam('action')); //edit

Why extend jQuery? What would be the benefit of extending jQuery vs just having a global function?
function qs(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}
http://jsfiddle.net/gilly3/sgxcL/
An alternative approach would be to parse the entire query string and store the values in an object for later use. This approach doesn't require a regular expression and extends the window.location object (but, could just as easily use a global variable):
location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
if (pair === "") return;
var parts = pair.split("=");
location.queryString[parts[0]] = parts[1] &&
decodeURIComponent(parts[1].replace(/\+/g, " "));
});
http://jsfiddle.net/gilly3/YnCeu/
This version also makes use of Array.forEach(), which is unavailable natively in IE7 and IE8. It can be added by using the implementation at MDN, or you can use jQuery's $.each() instead.

JQuery jQuery-URL-Parser plugin do the same job, for example to retrieve the value of search query string param, you can use
$.url().param('search');
This library is not actively maintained. As suggested by the author of the same plugin, you can use URI.js.
Or you can use js-url instead. Its quite similar to the one below.
So you can access the query param like $.url('?search')

Found this gem from our friends over at SitePoint.
https://www.sitepoint.com/url-parameters-jquery/.
Using PURE jQuery. I just used this and it worked. Tweaked it a bit for example sake.
//URL is http://www.example.com/mypage?ref=registration&email=bobo#example.com
$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
}
console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //bobo#example.com
Use as you will.

This isn't my code sample, but I've used it in the past.
//First Add this to extend jQuery
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
//Second call with this:
// Get object of URL parameters
var allVars = $.getUrlVars();
// Getting URL var by its name
var byName = $.getUrlVar('name');

I wrote a little function where you only have to parse the name of the query parameter. So if you have: ?Project=12&Mode=200&date=2013-05-27 and you want the 'Mode' parameter you only have to parse the 'Mode' name into the function:
function getParameterByName( name ){
var regexS = "[\\?&]"+name+"=([^&#]*)",
regex = new RegExp( regexS ),
results = regex.exec( window.location.search );
if( results == null ){
return "";
} else{
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
}
// example caller:
var result = getParameterByName('Mode');

Building on #Rob Neild's answer above, here is a pure JS adaptation that returns a simple object of decoded query string params (no %20's, etc).
function parseQueryString () {
var parsedParameters = {},
uriParameters = location.search.substr(1).split('&');
for (var i = 0; i < uriParameters.length; i++) {
var parameter = uriParameters[i].split('=');
parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
}
return parsedParameters;
}

function parseQueryString(queryString) {
if (!queryString) {
return false;
}
let queries = queryString.split("&"), params = {}, temp;
for (let i = 0, l = queries.length; i < l; i++) {
temp = queries[i].split('=');
if (temp[1] !== '') {
params[temp[0]] = temp[1];
}
}
return params;
}
I use this.

Written in Vanilla Javascript
//Get URL
var loc = window.location.href;
console.log(loc);
var index = loc.indexOf("?");
console.log(loc.substr(index+1));
var splitted = loc.substr(index+1).split('&');
console.log(splitted);
var paramObj = [];
for(var i=0;i<splitted.length;i++){
var params = splitted[i].split('=');
var key = params[0];
var value = params[1];
var obj = {
[key] : value
};
paramObj.push(obj);
}
console.log(paramObj);
//Loop through paramObj to get all the params in query string.

function getQueryStringValue(uri, key) {
var regEx = new RegExp("[\\?&]" + key + "=([^&#]*)");
var matches = uri.match(regEx);
return matches == null ? null : matches[1];
}
function testQueryString(){
var uri = document.getElementById("uri").value;
var searchKey = document.getElementById("searchKey").value;
var result = getQueryStringValue(uri, searchKey);
document.getElementById("result").value = result;
}
<input type="text" id="uri" placeholder="Uri"/>
<input type="text" id="searchKey" placeholder="Search Key"/>
<Button onclick="testQueryString()">Run</Button><br/>
<input type="text" id="result" disabled placeholder="Result"/>