We are trying to parse query parameters for the below URL
https://example.com?a=a1&b=b1&cd=C&D&ef=E&F
We want the parameters to read as
a = a1
b = b1
cd = C&D
ef = E&F
Currently, we are using the below javascript
var url_string = "https://example.com?a=a1&b=b1&cd=C&D&ef=E&F";
var url = new URL(url_string);
var cd = url.searchParams.get("cd");
console.log(cd);
It reads the value of cd as C and not C&D
The issue is because the URL has an ampersand in the query parameter values.
How can I get the full value i.e. C&D for the query parameter cd ?
My recommendation would be to follow standard URLs; i.e. URL encode ? and &'s.
// & -> %26
// ? -> %3F
let urlStr = 'https://example.com?a=a%26b%3Fc';
let url = new URL(urlStr);
console.log(url.searchParams.get('a')); // a&b?c
Alternatively, if you must use incorrect URLs, then you'll have to resort to your own custom parser. Standard URL parsers will assume correctly formatted URLs. The problem with this approach of using incorrect URLs is you have no way to know for certain whether ?a=x&b means
1) the param a has value 'x&b', or
2) the param a has value 'x' and the param b has value '' (empty string). I.e., example.com/?b actually means something different than example.com, in the first case, param b has value empty string, in the 2nd there is no param b.
Related
I'm trying to create a Custom JavaScript Variable in Google Tag Manager to split up information from a page url that has multiple separators. For example, in https://website.com/item/2006-yellow-submarine, I would want to capture the 2006. I've been using the code below to separate a URL based on one separator at a time (- or /). But if I used the code below to pull 2006, it would pull 2006 and everything after (so the data pulled would be 2006-yellow-submarine and not just 2006).
function() {
var pageUrl = window.location.href;
return pageUrl.split("/")[4];
}
Is there a way to extract only the 2006, or to essentially use a combination of - and / separators to pull single path points from a URL, without having to specify the URL in the code each time?
Since it's a variable meant to be used to automatically capture the year on each page, I can't make a variable for every individual page of the website. Therefore the solution can't involve specifying the URL.
You can split by RegExp, splitting by either / or -, i.e. /[/-]/:
const u = new URL("https://website.com/item/2006-yellow-submarine");
const pathname = u.pathname;
console.log(pathname);
// skip the first item... it will always be empty
const [, ...pathParts] = pathname.split(/[/-]/);
console.log(pathParts);
Make a new URL object from the string, extract the last part of the pathname, and then match the year with a small regular expression.
// Create a new URL object from the string
const url = new URL('https://website.com/item/2006-yellow-submarine');
// `split` the pathname on "/", and `pop` off
// the last element of that array
const end = url.pathname.split('/').pop();
// Then match the year
console.log(end.match(/[0-9]{4}/)[0]);
To do this you could do this:
function splitWebURL(url, loc1, loc2) {
return url.split("/")[loc1].split("-")[loc2];
}
var test = splitWebURL("https://website.com/item/2006-yellow-submarine", 4, 0);
console.log(test);
It works great and you can change it with ease by just changing the 2 index numbers and changing the url.
You could do something like that
let year = window.location.href.match(/item\/([0-9]*)-/)[1];
assuming you have an url that's like item/year-something,
you will have to handle the cases where the url does not match though, so perhaps like that :
let match = window.location.href.match(/item\/([0-9]*)-/);
if(match && match.hasOwnProperty(1)) {
let year = match[1]
}
Im trying to endcode a URL. One of the param value in the URL has & in it and hence we are using encodeURIComponent to encode it. After that, we also need to encode the whole URL, and the encoded values are getting encoded again. What should we do in this case?
Value to be encoded, encodeURICOmponent('A & B')
encodedvalue = A%20%26%20B
Query param = {"filter":{"ab":{"$like":"%A%20%26%20B%"}}}
encodeURI(param)
finalURL = %7B%22filter%22%3A%7B%22e2%22%3A%7B%22%24like%22%3A%22%25A%2520%2526%2520B%25%22%7D%7D%7D
Only apply the encoding once.
const value = 'A & B';
const param = JSON.stringify({"filter":{"ab":{"$like":value}}});
const url = encodeURI(param);
console.log(url);
I want to split the website name and get only URL without the query string
example:
www.xyz.com/.php?id=1
the URL can be of any length so I want to split to get the URL to only
xyz.com
able to split the URL and getting xyz.com/php?id=1
but how do I end the split and get only xyz.com
var domain2 = document.getElementById("domain_id").value.split("w.")[1];
You can use:
new URL()
for example -
var urlData = new URL("http://www.example.org/.php?id=1")
and than
urlData.host
which will only return the hostname
You can use a simple regex with match to capture the host in the way you want:
var url = 'www.xyz.com/.php?id=1';
var host = url.match(/www.(.*)\//)[1];
console.log(host)
Just adding it to other, you can also use this regex expression to capture everything up until the query string "?" like so;
This will also work if you want to grab any sub pages from url before the query string
var exp = new RegExp('^.*(?=([\?]))');
var url = exp.exec("www.xyz.com/.php?id=1");
var host = url[0];
console.log(host);
I wonder if it's possible to get this part of a string.
Here is my string:
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
Now I want to be able to grab just this part of the string, the file name:
12391381_10205760647243398_2385261683139818614_n.jpg
I tried:
var result = /[^/]*$/.exec(""+url+"")[0];
, but it will return
user%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=4c92c4d7-8979-4478-a63d-ea190bec87cf
My Regex is wrong.
Another this is, the file extension can be .png or jpg so it's not fixed to jpg.
You could use a regex to isolate the part you want :
This works :
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
console.log((string.match(/[A-Za-z0-9_]+.(jpg|png|bmp)/))[0].substring(2));
Note that may have to be adapted depending on how much the URL string changes:
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
var out = string.split('?')[0].split('%2F')[2];
console.log(out); // "12391381_10205760647243398_2385261683139818614_n.jpg"
Assuming, you always have an url, first I would decode the encoded / (%2F) characters via:
var string = "www.somesite.com/o/images%2Fc834vePyJ3SFVk2iO4rU0ke1cSa2%2F12391381_10205760647243398_2385261683139818614_n.jpg?alt=media&token=7a692a38-6982-474f-bea5-459c987ae575";
var decodedUrl = decodeURIComponent(string);
and then use a regex:
decodedUrl.match(/[^/]*(?=[?])/)
Mind, that this regex assumes parameters (the part starting with ?...) are present, so if that's not the case, you might have to alter it to your needs.
If the filename always has a .jpg extension:
var url = decodeURIComponent(string);
var filename = url.substring(url.lastIndexOf("/")+1, url.lastIndexOf(".jpg"))
If not:
url = url.substring(url.lastIndexOf("/")+1)
filename = url.substring(0,url.indexOf("?"))
Looking at the string, it appears that the file name is between the second occurrence of "%2F" and the first occurrence of "?" in the string.
The first step is to get rid of the part of the string before the second "%2F". This can be done by splitting the string at every "%2F" and taking the third element in the resulting array.
var intermediate = string.split("%2F")[2]
Then, we need to get rid of everything after the "?":
var file_name = intermediate.split("?")[0]
This should give you the file name from the URL
I have a url like http://www.example.com/folder/file.html#val=90&type="test"&set="none"&value="reset?setvalue=1&setvalue=45"
Now I need to get the portion of url from starting from #, How do I get that, I tried using window.location.search.substr(); but looks like that searches for ? in a url. is there a method to get the value of url after #
How do I also get a portion of url from ampersand &
Thanks,
Michael
var hash = window.location.hash;
More info here: https://developer.mozilla.org/en/DOM/window.location
Update: This will grab all characters after the hashtag, including any query strings. From the MOZ manual:
window.location.hash === the part of the URL that follows the # symbol, including the # symbol.
You can listen for the hashchange event to get notified of changes to the hash in
supporting browsers.
Now, if you need to PARSE the query string, which I believe you do, check this out here: How can I get query string values in JavaScript?
To grab the hash:
location.hash.substr(1); //substr removes the leading #
To grab the query string
location.search.substr(1); //substr removes the leading ?
[EDIT - since you seem to have a sort query-string-esq string which is actually part of your hash, the following will retrieve and parse it into an object of name/value pairings.
var params_tmp = location.hash.substr(1).split('&'),
params = {};
params_tmp.forEach(function(val) {
var splitter = val.split('=');
params[splitter[0]] = splitter[1];
});
console.log(params.set); //"none"
This will get the # and & values:
var page_url = window.location + ""; // Get window location and convert to string by adding ""
var hash_value = page_url.match("#(.*)"); // Regular expression to match anything in the URL that follows #
var amps; // Create variable amps to hold ampersand array
if(hash_value) // Check whether the search succeeded in finding something after the #
{
amps = (hash_value[1]).split("&"); // Split string into array using "&" as delimiter
alert(amps); // Alert array which will contain value after # at index 0, and values after each & as subsequent indices
}