Remove querystring parameters from url with regex - javascript

I'm pretty new to regex and need to remove some content from our url
http://mysite.blah/problem/smtp/smtp-open-relay?page=prob_detail&showlogin=1&action=smtp:134.184.90.18
I need to remove everything from the "?" and on, leaving me just:
http://mysite.blah/problem/smtp/smtp-open-relay
Here is our current regex expression we are using to grab the route data. For example I can grab "smtp" and "smtp-open-relay" (which we need). However sometimes our url changes depending on where the user is coming from thereby appending the querystring parameters which is causing our current regex expression to blow up.
// Retrieve the route data from the route
var routeData = /([0-9a-zA-Z_.-]+)\/([0-9a-zA-Z_.-]+)$/g.exec(route);
I need it to ignore stuff from the "?" on.

A regular expression is probably more than you need.
You could do the following to remove the ? and everything (query
string + hash) after it:
var routeData = route.split("?")[0];
If you truly wanted to strip only the query string, you could preserve
the hash by reconstructing the URL from the window.location object:
var routeData = window.location.origin + window.location.pathname + window.location.hash;
If you want the query string, you can read it with window.location.search.

i just used this one
var routeData= route.substring(0, route.indexOf('?'));

Use this function:
var getCleanUrl = function(url) {
return url.replace(/#.*$/, '').replace(/\?.*$/, '');
};
// get rid of hash and params
console.log(getCleanUrl('https://sidanmor.com/?firstname=idan&lastname=mor'));

If you're doing this in-browser, let the browser do the parsing:
location.origin + location.pathname
Or for arbitrary URLs:
function withoutQS(_url) {
var url = document.createElement('a');
url.href = _url;
return url.origin + url.pathname;
}

Following is the cleaner way to remove a given parameter say: prop1 form querystring of url.
Querystring can be found in url by accessing
window.location.search
Here you apply regular expression for prop1:
var queryStringWithoutProp1=window.location.search.replace(/(&?prop1=)(.[^&]*)/,"");
queryStringWithoutProp1 must return querystring without prop1=value parameter-value combination from querystring
Note: '&?' ensures whether prop1 appears as first parameter or any subsequent one.

Related

How to ignore invalid URL parameters?

Before I go on, let me say that I've looked through a number of threads already and can't find an answer that works for me.
Basically, I've built a custom link shortener and I'm using URLSearchParams to pull the URL to be shortened and the custom slug from the URL search query as follows:
var e = window.location.search;
const urlParams = new URLSearchParams(e);
const url = urlParams.get("url");
const slug = urlParams.get("slug");
Where the format for a query is: ?url=https://google.com&slug=customslug
After the parameters are handled, the URL string is treated with trim() to remove any whitespace. The final output is encoded with encodeURIComponent() when the API I'm using (https://short.io) is called.
However, I want to be able to pass URLs with &, like so: ?url=https://google.com/&testing&slug=customslug. My ideal solution would simply treat any & that isn't part of the &slug parameter as a part of the URL contained within the &url parameter. Currently, the & character is ignored if it isn't attached to a valid parameter (url or slug).
I have tried encoding the query input using encodeURIComponent(), but that results in a failure to pick up on either defined parameter. I have also tried splitting the input using split("&slug",1), but that results in an array and I cannot pass arrays to the Short.io API.
Any suggestions?
You should use the URL Encoded ampersand symbol %26.
var e = "?url=https://google.com/%26testing&slug=customslug";
const urlParams = new URLSearchParams(e);
const url = urlParams.get("url");
const slug = urlParams.get("slug");
console.log(url);
console.log(slug);
I solved my issue by building off of #CherryDT's comment about using window.location.hash to get my URL string. Ultimately, I chose to forgo the idea of a slug in the address bar, since it would cause further problems with my script.
While this solution is only applicable for my purposes, I'm detailing the solution because it functions as a workaround for the issue of not being able to encode a passed URL string from the address bar. Might be useful to someone, someday.
var e = window.location.href.replace(window.location.hash, '');
if (e.endsWith("?") === true) {
var url = window.location.hash.substr(1);
if (url === "") {
// Error code
} else {
console.log("A URL to be shortened was provided via hash.");
// Pass url to rest of script
}
}

Javascript get query string parameter values that has query string parameter in turn

I am pretty poor in regex so hoping to get some help here.
I have an url which has a query string parameters. The parameter in turn is a url which has qs parameters of itself.
For eg: my url is something like
http://myurl.com/somepage?ref=/en-us/products-overview/find-product/home/kitchen/2980?source=google&isadvertisement=false&organic=true
Now when i use any of the functions to extract the whole query string parameter, i somehow get only the first one.
What i am expecting is: : /en-us/products-overview/find-product/home/kitchen/2980?source=google&isadvertisement=false&organic=true
But what i get is: /en-us/products-overview/find-product/home/kitchen/2980?source=google
notice that the other two parameters (isadvertisement and organic) are missing.
my function is
function getUrlParameter(name) {
var url = 'http://myurl.com/somepage?ref=/en-us/products-overview/find-product/home/kitchen/2980?source=google&isadvertisement=false&organic=true';
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(url);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
JsFiddle here:
i tried other links from SO to extract QS parameters. none of them seem to handle this scenario
The ampersands in your url are being treated as top level parameter separators. If they are part of a parameter themselves, they need to be escaped. Your escaped url would look like http://myurl.com/somepage?ref=%2Fen-us%2Fproducts-overview%2Ffind-product%2Fhome%2Fkitchen%2F2980%3Fsource%3Dgoogle%26isadvertisement%3Dfalse%26organic%3Dtrue. How you encode the url depends on where it is coming from. JS provides the encodeURIComponent() function.
Then you could use decodeURIComponent() to decode that back to the expected url. The issue is coming from having nested query parameters.
To get query parameters in general though, a built in solution using URL could be something like:
var url=new URL('...');
for (var e of url.searchParams.entries()){
console.log(e);
}

Get values of parameters from URL

I’m working on a tool which takes the value parameters in the URL and does a few things with them.
My issue is, I can’t seem to use document.location to show the specific value that I’m after, for example:
www.examplesite.com?yourname=gilgilad
I want to use document.location.search and put it in a var, I need that var's value to be "gilgilad".
Is this even possible using location.search?
location.search will return all after question mark including it. So there is universal js to get value of the first parameter (even if url has more parameters):
var desire = location.search.slice(1).split("&")[0].split("=")[1]
Example: let's take url http://example.com?name=jon&country=us
location.search will be equal to ?name=jon&country=us
.slice(1) skips the ?, returning the rest of the string.
.split("&")[0] splits it into two strings (name=jon and
country=us) and takes first one
.split("=")[1] splits name=jon into name and jon and takes the second one. Done!
let url = new URL('www.examplesite.com?yourname=gilgilad');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('yourname'));
you can consider also to user window.location or window.location.search directly
let searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('yourname'));
A more generic solution to split the location.search query parameters and convert them into an object:
var a = location.search.split("&");
var o = a.reduce(function(o, v) {
var kv = v.split("=");
kv[0] = kv[0].replace("?", "");
o[kv[0]] = kv[1];
return o;
},
{});
To make ?yourname=gilgilad using document.location.search:
window.location.search = 'yourname=gilgilad';
here is jsfiddle: http://jsfiddle.net/t81k3bgc/
make sure to use console and then [run]. you will see:
For more information:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location#Example_.235.3A_Send_a_string_of_data_to_the_server_by_modifying_the_search_property.3A

Change the pathname in the URL of a link while keeping the querystring constant

From a page with the following URL, http://example.com/foo.html?query=1&other=2, I want to create a link to http://example.com/bar.html?query=1&other=2. How do I do that without explicitly saving and reloading all the query strings.
I need this to easily link from an iframe version of a page (embed.html?query) to the full page (index.html?query).
I would have recommended using the Location object's search method (available at document.location or window.location) to pull out the parameters, then modify the rest of the URL, but that API is apparently specific to Firefox.
I would simplify #DMortensen's answer by just splitting on the first ?, then modifying the first part (which will be the URL's path portion only), and reapplying the second part.
If you need to parse the parameters, I recommend the jQuery plugin Query Parameter Parser: one call to $.parseQuery(s) will pull out an object of all the keys & values.
It can be finicky, but you could split the URI on '?' and then loop through the 2nd element of that array to grab the key/val pairs if you need to evaluate each pair (using '&' as a delimiter). The obvious weakness in this would be if there are additional '?' or '&' used in the URI.
Something like this maybe? (pseudocode-ish)
var URI = document.URL;
var qs = URI.split('?');
var keyvalpair = qs[1].split('&');
var reconstructedURI = '&' + keyvalpair;
for(var i = 0; i< keyvalpair.length; i++){
var key = keyvalpair[i].split('=')[0];
var val = keyvalpair[i].split('=')[1];
}
Thank you for all the answers. I tried the following and it works.
function gotoFullSite() {
var search = window.location.search;
window.open("http://example.com/"+search)
}
$('#clickable').click(gotoFullSite);
and then use <a id = "clickable" href="#"></a>. When I click the link, it opens the proper website with all the query parameters in a new tab. (I need a new tab to break out of an iframe.)

parse url to get id using javascript regex

I am writing a router which will parse the url and redirect to necessary components in the code, when I change my url and pass object id with it, I want to parse it using regular expression and route it to get that object by id.
mysite.com/blah#path=folder/?folderId=klafjlka
How do I parse this url using javscript regex and route it to that folder
With reference to backbone, I want to write a code which does this, but I'm not using backbone
routes : { "folder/:id" : "handler" },
I tend to find that using .split normally creates much more readable code in these situations.
If you use window.location.hash to get your data originally, you'll be left with
#path=folder/?folderId=klafjlka
Eliminating the first lot of un-needed stuff. The rest can be simply done with a split and a looped split.
//Remove the initial hash from the window.location.hash
var hash = window.location.hash.substr(1),
//Split it down so we have ["path=folder","folderId=klafjlka"]
paramSplit = hash.split("/?");
var params = {};
for (var x=0; x<paramSplit.length; x++){
//Split it at the equals
var split = paramSplit[x].split("=");
params[split[0]]=split[1];
}
console.log(params);
Params should return
{
path: "folder",
folderId: "klafjlka"
}
Which is easy to use for whatever your purposes are.
If your url is in a string and has always the same structure
var url = 'mysite.com/blah#path=folder/?folderId=klafjlka';
var re = /#path=(.+?)\?folderId=(.*)/i
var args = url.match(re);
var path = args[1];
var id = args[2];
this searches for #path= and captures the following characters until ? and then searches for ?folderId= and captures everything else.
Now path will contain folder/ and id wil contain klafjlka.

Categories