Related
I have a getter to get the value from a cookie.
Now I have 2 cookies by the name shares= and by the name obligations= .
I want to make this getter only to get the values from the obligations cookie.
How do I do this? So the for splits the data into separate values and puts it in an array.
function getCookie1() {
// What do I have to add here to look only in the "obligations=" cookie?
// Because now it searches all the cookies.
var elements = document.cookie.split('=');
var obligations= elements[1].split('%');
for (var i = 0; i < obligations.length - 1; i++) {
var tmp = obligations[i].split('$');
addProduct1(tmp[0], tmp[1], tmp[2], tmp[3]);
}
}
One approach, which avoids iterating over an array, would be:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
Walkthrough
Splitting a string by token will produce either, an array with one string (same value), in case token does not exist in a string, or an array with two strings , in case token is found in a string .
The first (left) element is string of what was before the token, and the second one (right) is what is string of what was after the token.
(NOTE: in case string starts with a token, first element is an empty string)
Considering that cookies are stored as follows:
"{name}={value}; {name}={value}; ..."
in order to retrieve specific cookie value, we just need to get string that is after "; {name}=" and before next ";". Before we do any processing, we prepend the cookies string with "; ", so that every cookie name, including the first one, is enclosed with "; " and "=":
"; {name}={value}; {name}={value}; ..."
Now, we can first split by "; {name}=", and if token is found in a cookie string (i.e. we have two elements), we will end up with second element being a string that begins with our cookie value. Then we pull that out from an array (i.e. pop), and repeat the same process, but now with ";" as a token, but this time pulling out the left string (i.e. shift) to get the actual token value.
I would prefer using a single regular expression match on the cookie:
window.getCookie = function(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) return match[2];
}
OR Also we are able to use as a function , check below code.
function check_cookie_name(name)
{
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
console.log(match[2]);
}
else{
console.log('--something went wrong---');
}
}
Improved thanks to Scott Jungwirth in the comments.
The methods in some of the other answers that use a regular expression do not cover all cases, particularly:
When the cookie is the last cookie. In this case there will not be a semicolon after the cookie value.
When another cookie name ends with the name being looked up. For example, you are looking for the cookie named "one", and there is a cookie named "done".
When the cookie name includes characters that are not interpreted as themselves when used in a regular expression unless they are preceded by a backslash.
The following method handles these cases:
function getCookie(name) {
function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); }
var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
return match ? match[1] : null;
}
This will return null if the cookie is not found. It will return an empty string if the value of the cookie is empty.
Notes:
This function assumes cookie names are case sensitive.
document.cookie - When this appears on the right-hand side of an assignment, it represents a string containing a semicolon-separated list of cookies, which in turn are name=value pairs. There appears to be a single space after each semicolon.
String.prototype.match() - Returns null when no match is found. Returns an array when a match is found, and the element at index [1] is the value of the first matching group.
Regular Expression Notes:
(?:xxxx) - forms a non-matching group.
^ - matches the start of the string.
| - separates alternative patterns for the group.
;\\s* - matches one semi-colon followed by zero or more whitespace characters.
= - matches one equal sign.
(xxxx) - forms a matching group.
[^;]* - matches zero or more characters other than a semi-colon. This means it will match characters up to, but not including, a semi-colon or to the end of the string.
If you use jQuery I recommend you to use this plugin:
https://github.com/carhartl/jquery-cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
So you can read cookie like this:
var value = $.cookie("obligations");
Also you can write cookie:
$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });
Delete cookie:
$.removeCookie('obligations');
Here is a one liner to get a cookie value with a specific name without the need of any external lib:
const value = ('; '+document.cookie).split(`; COOKIE_NAME=`).pop().split(';')[0];
This answer is based on kirlich's brilliant solution. The only compromise of this solution is, that you will get an empty string when the cookie does not exist. In most cases this should not be a deal breaker, though.
4 years later, ES6 way simpler version.
function getCookie(name) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [k,v] = el.split('=');
cookie[k.trim()] = v;
})
return cookie[name];
}
I have also created a gist to use it as a Cookie object. e.g., Cookie.set(name,value) and Cookie.get(name)
This read all cookies instead of scanning through. It's ok for small number of cookies.
I have modified the function that Jonathan provided here, by using regular expression you can get a cookie value by its name like this:
function getCookie(name){
var pattern = RegExp(name + "=.[^;]*")
var matched = document.cookie.match(pattern)
if(matched){
var cookie = matched[0].split('=')
return cookie[1]
}
return false
}
If it returns empty string it means that the cookie exists but has no value, if it returns false then the cookie doesn't exist. I hope this helps.
You can use js-cookie library to get and set JavaScript cookies.
Include to your HTML:
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
To create a Cookie:
Cookies.set('name', 'value');
To read a Cookie:
Cookies.get('name'); // => 'value'
A simple way :)
const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")
One liner to convert cookie into JavaScript Object or Map
Object.fromEntries(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))
new Map(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))
My one linear function to get the value cookie by its key.
cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]
Call cookie function as
cookie('some-key')
Here is a pretty short version
function getCookie(n) {
let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
return a ? a[1] : '';
}
Note that I made use of ES6's template strings to compose the regex expression.
I know it is an old question but I came across this problem too. Just for the record, There is a little API in developers mozilla web page.
Yoy can get any cookie by name using only JS. The code is also cleaner IMHO (except for the long line, that I'm sure you can easily fix).
function getCookie(sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}
As stated in the comments be aware that this method assumes that the key and value were encoded using encodeURIComponent(). Remove decode & encodeURIComponent() if the key and value of the cookie were not encoded.
function getCookie(name) {
var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
if (pair)
return pair.split('=')[1]
}
kirlich gave a good solution. However, it fails when there are two cookie values with similar names, here is a simple fix for this situation:
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length >= 2) return parts.pop().split(";").shift();
}
Use object.defineProperty
With this, you can easily access cookies
Object.defineProperty(window, "Cookies", {
get: function() {
return document.cookie.split(';').reduce(function(cookies, cookie) {
cookies[cookie.split("=")[0]] = unescape(cookie.split("=")[1]);
return cookies
}, {});
}
});
From now on you can just do:
alert( Cookies.obligations );
This will automatically update too, so if you change a cookie, the Cookies will change too.
It seems to me you could split the cookie key-value pairs into an array and base your search on that:
var obligations = getCookieData("obligations");
Which runs the following:
function getCookieData( name ) {
var pairs = document.cookie.split("; "),
count = pairs.length, parts;
while ( count-- ) {
parts = pairs[count].split("=");
if ( parts[0] === name )
return parts[1];
}
return false;
}
Fiddle: http://jsfiddle.net/qFmPc/
Or possibly even the following:
function getCookieData( name ) {
var patrn = new RegExp( "^" + name + "=(.*?);" ),
patr2 = new RegExp( " " + name + "=(.*?);" );
if ( match = (document.cookie.match(patrn) || document.cookie.match(patr2)) )
return match[1];
return false;
}
always works well:
function getCookie(cname) {
var name = cname + "=",
ca = document.cookie.split(';'),
i,
c,
ca_length = ca.length;
for (i = 0; i < ca_length; i += 1) {
c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) !== -1) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(variable, value, expires_seconds) {
var d = new Date();
d = new Date(d.getTime() + 1000 * expires_seconds);
document.cookie = variable + '=' + value + '; expires=' + d.toGMTString() + ';';
}
No requirements for jQuery or anything. Pure old good JavaScript.
Simple function for Get cookie with cookie name:
function getCookie(cn) {
var name = cn+"=";
var allCookie = decodeURIComponent(document.cookie).split(';');
var cval = [];
for(var i=0; i < allCookie.length; i++) {
if (allCookie[i].trim().indexOf(name) == 0) {
cval = allCookie[i].trim().split("=");
}
}
return (cval.length > 0) ? cval[1] : "";
}
Apparently MDN has never heard of the word-boundary regex character class \b, which matches contiguous \w+ that is bounded on either side with \W+:
getCookie = function(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : null;
};
var obligations = getCookie('obligations');
In my projects I use following function to access cookies by name
function getCookie(cookie) {
return document.cookie.split(';').reduce(function(prev, c) {
var arr = c.split('=');
return (arr[0].trim() === cookie) ? arr[1] : prev;
}, undefined);
}
There are already nice answers here for getting the cookie,However here is my own solution :
function getcookie(cookiename){
var cookiestring = document.cookie;
var cookiearray = cookiestring.split(';');
for(var i =0 ; i < cookiearray.length ; ++i){
if(cookiearray[i].trim().match('^'+cookiename+'=')){
return cookiearray[i].replace(`${cookiename}=`,'').trim();
}
} return null;
}
usage :`
getcookie('session_id');
// gets cookie with name session_id
set by javascript
document.cookie = 'cookiename=tesing';
get by jquery with the jquery-cookie plugin
var value = $.cookie("cookiename");
alert(value);
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Pass the cookie name to getCookie() function to get it's value
My solution is this:
function getCookieValue(cookieName) {
var ca = document.cookie.split('; ');
return _.find(ca, function (cookie) {
return cookie.indexOf(cookieName) === 0;
});
}
This function uses the Underscorejs _.find-function. Returns undefined if cookie name doesn't exist
I have done it this way. so that i get an object to access to separate the values.With this u can pass the cookie to the parent and then you can access your values by the keys like
var cookies=getCookieVal(mycookie);
alert(cookies.mykey);
function getCookieVal(parent) {
var cookievalue = $.cookie(parent).split('&');
var obj = {};
$.each(cookievalue, function (i, v) {
var key = v.substr(0, v.indexOf("="));
var val = v.substr(v.indexOf("=") + 1, v.length);
obj[key] = val;
});
return obj;
}
Just use the following function (a pure javascript code)
const getCookie = (name) => {
const cookies = Object.assign({}, ...document.cookie.split('; ').map(cookie => {
const name = cookie.split('=')[0];
const value = cookie.split('=')[1];
return {[name]: value};
}));
return cookies[name];
};
I wrote something that might be easy to use, If anyone has some things to add, feel free to do so.
function getcookie(name = '') {
let cookies = document.cookie;
let cookiestore = {};
cookies = cookies.split(";");
if (cookies[0] == "" && cookies[0][0] == undefined) {
return undefined;
}
cookies.forEach(function(cookie) {
cookie = cookie.split(/=(.+)/);
if (cookie[0].substr(0, 1) == ' ') {
cookie[0] = cookie[0].substr(1);
}
cookiestore[cookie[0]] = cookie[1];
});
return (name !== '' ? cookiestore[name] : cookiestore);
}
Usage
getcookie() - returns an object with all cookies on the web page.
getcookie('myCookie') - returns the value of the cookie myCookie from the cookie object, otherwise returns undefined if the cookie is empty or not set.
Example
// Have some cookies :-)
document.cookie = "myCookies=delicious";
document.cookie = "myComputer=good";
document.cookie = "myBrowser=RAM hungry";
// Read them
console.log( "My cookies are " + getcookie('myCookie') );
// Outputs: My cookies are delicious
console.log( "My computer is " + getcookie('myComputer') );
// Outputs: My computer is good
console.log( "My browser is " + getcookie('myBrowser') );
// Outputs: My browser is RAM hungry
console.log( getcookie() );
// Outputs: {myCookie: "delicious", myComputer: "good", myBrowser: "RAM hungry"}
// (does cookie exist?)
if (getcookie('hidden_cookie')) {
console.log('Hidden cookie was found!');
} else {
console.log('Still no cookie :-(');
}
// (do any cookies exist?)
if (getcookie()) {
console.log("You've got cookies to eat!");
} else {
console.log('No cookies for today :-(');
}
A functional approach to find existing cookies. It returns an array, so it supports multiple occurrences of the same name. It doesn't support partial key matching, but it's trivial to replace the === in the filter with a regex.
function getCookie(needle) {
return document.cookie.split(';').map(function(cookiestring) {
cs = cookiestring.trim().split('=');
if(cs.length === 2) {
return {'name' : cs[0], 'value' : cs[1]};
} else {
return {'name' : '', 'value' : ''};
}
})
.filter(function(cookieObject) {
return (cookieObject.name === needle);
});
}
Get cookie by name just pass the name of cookie to below function
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
I have a getter to get the value from a cookie.
Now I have 2 cookies by the name shares= and by the name obligations= .
I want to make this getter only to get the values from the obligations cookie.
How do I do this? So the for splits the data into separate values and puts it in an array.
function getCookie1() {
// What do I have to add here to look only in the "obligations=" cookie?
// Because now it searches all the cookies.
var elements = document.cookie.split('=');
var obligations= elements[1].split('%');
for (var i = 0; i < obligations.length - 1; i++) {
var tmp = obligations[i].split('$');
addProduct1(tmp[0], tmp[1], tmp[2], tmp[3]);
}
}
One approach, which avoids iterating over an array, would be:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
Walkthrough
Splitting a string by token will produce either, an array with one string (same value), in case token does not exist in a string, or an array with two strings , in case token is found in a string .
The first (left) element is string of what was before the token, and the second one (right) is what is string of what was after the token.
(NOTE: in case string starts with a token, first element is an empty string)
Considering that cookies are stored as follows:
"{name}={value}; {name}={value}; ..."
in order to retrieve specific cookie value, we just need to get string that is after "; {name}=" and before next ";". Before we do any processing, we prepend the cookies string with "; ", so that every cookie name, including the first one, is enclosed with "; " and "=":
"; {name}={value}; {name}={value}; ..."
Now, we can first split by "; {name}=", and if token is found in a cookie string (i.e. we have two elements), we will end up with second element being a string that begins with our cookie value. Then we pull that out from an array (i.e. pop), and repeat the same process, but now with ";" as a token, but this time pulling out the left string (i.e. shift) to get the actual token value.
I would prefer using a single regular expression match on the cookie:
window.getCookie = function(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) return match[2];
}
OR Also we are able to use as a function , check below code.
function check_cookie_name(name)
{
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
console.log(match[2]);
}
else{
console.log('--something went wrong---');
}
}
Improved thanks to Scott Jungwirth in the comments.
The methods in some of the other answers that use a regular expression do not cover all cases, particularly:
When the cookie is the last cookie. In this case there will not be a semicolon after the cookie value.
When another cookie name ends with the name being looked up. For example, you are looking for the cookie named "one", and there is a cookie named "done".
When the cookie name includes characters that are not interpreted as themselves when used in a regular expression unless they are preceded by a backslash.
The following method handles these cases:
function getCookie(name) {
function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); }
var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
return match ? match[1] : null;
}
This will return null if the cookie is not found. It will return an empty string if the value of the cookie is empty.
Notes:
This function assumes cookie names are case sensitive.
document.cookie - When this appears on the right-hand side of an assignment, it represents a string containing a semicolon-separated list of cookies, which in turn are name=value pairs. There appears to be a single space after each semicolon.
String.prototype.match() - Returns null when no match is found. Returns an array when a match is found, and the element at index [1] is the value of the first matching group.
Regular Expression Notes:
(?:xxxx) - forms a non-matching group.
^ - matches the start of the string.
| - separates alternative patterns for the group.
;\\s* - matches one semi-colon followed by zero or more whitespace characters.
= - matches one equal sign.
(xxxx) - forms a matching group.
[^;]* - matches zero or more characters other than a semi-colon. This means it will match characters up to, but not including, a semi-colon or to the end of the string.
If you use jQuery I recommend you to use this plugin:
https://github.com/carhartl/jquery-cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
So you can read cookie like this:
var value = $.cookie("obligations");
Also you can write cookie:
$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });
Delete cookie:
$.removeCookie('obligations');
Here is a one liner to get a cookie value with a specific name without the need of any external lib:
const value = ('; '+document.cookie).split(`; COOKIE_NAME=`).pop().split(';')[0];
This answer is based on kirlich's brilliant solution. The only compromise of this solution is, that you will get an empty string when the cookie does not exist. In most cases this should not be a deal breaker, though.
4 years later, ES6 way simpler version.
function getCookie(name) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [k,v] = el.split('=');
cookie[k.trim()] = v;
})
return cookie[name];
}
I have also created a gist to use it as a Cookie object. e.g., Cookie.set(name,value) and Cookie.get(name)
This read all cookies instead of scanning through. It's ok for small number of cookies.
I have modified the function that Jonathan provided here, by using regular expression you can get a cookie value by its name like this:
function getCookie(name){
var pattern = RegExp(name + "=.[^;]*")
var matched = document.cookie.match(pattern)
if(matched){
var cookie = matched[0].split('=')
return cookie[1]
}
return false
}
If it returns empty string it means that the cookie exists but has no value, if it returns false then the cookie doesn't exist. I hope this helps.
You can use js-cookie library to get and set JavaScript cookies.
Include to your HTML:
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
To create a Cookie:
Cookies.set('name', 'value');
To read a Cookie:
Cookies.get('name'); // => 'value'
A simple way :)
const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")
One liner to convert cookie into JavaScript Object or Map
Object.fromEntries(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))
new Map(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))
My one linear function to get the value cookie by its key.
cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]
Call cookie function as
cookie('some-key')
Here is a pretty short version
function getCookie(n) {
let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
return a ? a[1] : '';
}
Note that I made use of ES6's template strings to compose the regex expression.
I know it is an old question but I came across this problem too. Just for the record, There is a little API in developers mozilla web page.
Yoy can get any cookie by name using only JS. The code is also cleaner IMHO (except for the long line, that I'm sure you can easily fix).
function getCookie(sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}
As stated in the comments be aware that this method assumes that the key and value were encoded using encodeURIComponent(). Remove decode & encodeURIComponent() if the key and value of the cookie were not encoded.
function getCookie(name) {
var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
if (pair)
return pair.split('=')[1]
}
kirlich gave a good solution. However, it fails when there are two cookie values with similar names, here is a simple fix for this situation:
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length >= 2) return parts.pop().split(";").shift();
}
Use object.defineProperty
With this, you can easily access cookies
Object.defineProperty(window, "Cookies", {
get: function() {
return document.cookie.split(';').reduce(function(cookies, cookie) {
cookies[cookie.split("=")[0]] = unescape(cookie.split("=")[1]);
return cookies
}, {});
}
});
From now on you can just do:
alert( Cookies.obligations );
This will automatically update too, so if you change a cookie, the Cookies will change too.
It seems to me you could split the cookie key-value pairs into an array and base your search on that:
var obligations = getCookieData("obligations");
Which runs the following:
function getCookieData( name ) {
var pairs = document.cookie.split("; "),
count = pairs.length, parts;
while ( count-- ) {
parts = pairs[count].split("=");
if ( parts[0] === name )
return parts[1];
}
return false;
}
Fiddle: http://jsfiddle.net/qFmPc/
Or possibly even the following:
function getCookieData( name ) {
var patrn = new RegExp( "^" + name + "=(.*?);" ),
patr2 = new RegExp( " " + name + "=(.*?);" );
if ( match = (document.cookie.match(patrn) || document.cookie.match(patr2)) )
return match[1];
return false;
}
always works well:
function getCookie(cname) {
var name = cname + "=",
ca = document.cookie.split(';'),
i,
c,
ca_length = ca.length;
for (i = 0; i < ca_length; i += 1) {
c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) !== -1) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(variable, value, expires_seconds) {
var d = new Date();
d = new Date(d.getTime() + 1000 * expires_seconds);
document.cookie = variable + '=' + value + '; expires=' + d.toGMTString() + ';';
}
No requirements for jQuery or anything. Pure old good JavaScript.
Simple function for Get cookie with cookie name:
function getCookie(cn) {
var name = cn+"=";
var allCookie = decodeURIComponent(document.cookie).split(';');
var cval = [];
for(var i=0; i < allCookie.length; i++) {
if (allCookie[i].trim().indexOf(name) == 0) {
cval = allCookie[i].trim().split("=");
}
}
return (cval.length > 0) ? cval[1] : "";
}
Apparently MDN has never heard of the word-boundary regex character class \b, which matches contiguous \w+ that is bounded on either side with \W+:
getCookie = function(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : null;
};
var obligations = getCookie('obligations');
In my projects I use following function to access cookies by name
function getCookie(cookie) {
return document.cookie.split(';').reduce(function(prev, c) {
var arr = c.split('=');
return (arr[0].trim() === cookie) ? arr[1] : prev;
}, undefined);
}
There are already nice answers here for getting the cookie,However here is my own solution :
function getcookie(cookiename){
var cookiestring = document.cookie;
var cookiearray = cookiestring.split(';');
for(var i =0 ; i < cookiearray.length ; ++i){
if(cookiearray[i].trim().match('^'+cookiename+'=')){
return cookiearray[i].replace(`${cookiename}=`,'').trim();
}
} return null;
}
usage :`
getcookie('session_id');
// gets cookie with name session_id
set by javascript
document.cookie = 'cookiename=tesing';
get by jquery with the jquery-cookie plugin
var value = $.cookie("cookiename");
alert(value);
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Pass the cookie name to getCookie() function to get it's value
My solution is this:
function getCookieValue(cookieName) {
var ca = document.cookie.split('; ');
return _.find(ca, function (cookie) {
return cookie.indexOf(cookieName) === 0;
});
}
This function uses the Underscorejs _.find-function. Returns undefined if cookie name doesn't exist
I have done it this way. so that i get an object to access to separate the values.With this u can pass the cookie to the parent and then you can access your values by the keys like
var cookies=getCookieVal(mycookie);
alert(cookies.mykey);
function getCookieVal(parent) {
var cookievalue = $.cookie(parent).split('&');
var obj = {};
$.each(cookievalue, function (i, v) {
var key = v.substr(0, v.indexOf("="));
var val = v.substr(v.indexOf("=") + 1, v.length);
obj[key] = val;
});
return obj;
}
Just use the following function (a pure javascript code)
const getCookie = (name) => {
const cookies = Object.assign({}, ...document.cookie.split('; ').map(cookie => {
const name = cookie.split('=')[0];
const value = cookie.split('=')[1];
return {[name]: value};
}));
return cookies[name];
};
I wrote something that might be easy to use, If anyone has some things to add, feel free to do so.
function getcookie(name = '') {
let cookies = document.cookie;
let cookiestore = {};
cookies = cookies.split(";");
if (cookies[0] == "" && cookies[0][0] == undefined) {
return undefined;
}
cookies.forEach(function(cookie) {
cookie = cookie.split(/=(.+)/);
if (cookie[0].substr(0, 1) == ' ') {
cookie[0] = cookie[0].substr(1);
}
cookiestore[cookie[0]] = cookie[1];
});
return (name !== '' ? cookiestore[name] : cookiestore);
}
Usage
getcookie() - returns an object with all cookies on the web page.
getcookie('myCookie') - returns the value of the cookie myCookie from the cookie object, otherwise returns undefined if the cookie is empty or not set.
Example
// Have some cookies :-)
document.cookie = "myCookies=delicious";
document.cookie = "myComputer=good";
document.cookie = "myBrowser=RAM hungry";
// Read them
console.log( "My cookies are " + getcookie('myCookie') );
// Outputs: My cookies are delicious
console.log( "My computer is " + getcookie('myComputer') );
// Outputs: My computer is good
console.log( "My browser is " + getcookie('myBrowser') );
// Outputs: My browser is RAM hungry
console.log( getcookie() );
// Outputs: {myCookie: "delicious", myComputer: "good", myBrowser: "RAM hungry"}
// (does cookie exist?)
if (getcookie('hidden_cookie')) {
console.log('Hidden cookie was found!');
} else {
console.log('Still no cookie :-(');
}
// (do any cookies exist?)
if (getcookie()) {
console.log("You've got cookies to eat!");
} else {
console.log('No cookies for today :-(');
}
A functional approach to find existing cookies. It returns an array, so it supports multiple occurrences of the same name. It doesn't support partial key matching, but it's trivial to replace the === in the filter with a regex.
function getCookie(needle) {
return document.cookie.split(';').map(function(cookiestring) {
cs = cookiestring.trim().split('=');
if(cs.length === 2) {
return {'name' : cs[0], 'value' : cs[1]};
} else {
return {'name' : '', 'value' : ''};
}
})
.filter(function(cookieObject) {
return (cookieObject.name === needle);
});
}
Get cookie by name just pass the name of cookie to below function
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
I have 2 input fields on my form: email and website
How do I use JQuery to validate the email address domain must matched with the website domain?
For example: if website is http://example.com or with www or without http:// or without http://www.
Then the email address field must be user#example.com
Here is my form https://jsfiddle.net/zm7e8r7p/
$(document).ready(function(){
$( "#target" ).submit(function( event ) {
var val = $("#website").val();
var myString = val.substr(val.indexOf("http://") + 7);
var emailString = $("#email").val();
var myEmail = emailString.substr(emailString.indexOf("#")+1);
if (myString == myEmail){
$( "span" ).text( "Validated..." ).show();
event.preventDefault();
}else{
$( "span" ).text( "Not valid!" ).show();
event.preventDefault();
}
});
});
You can use URL regex by Crockford
Getting only last two parts of domain name is optional, you can use it if you want to convert ww2.mobile.gmail.com into gmail.com. This logic will affect domain names like .co.in as #samanime points out
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url = 'www.mobile.ora.co.in:80/goodparts?q#fragment';
var result = parse_url.exec(url);
var hostName = result[3];
console.log("host name: ", hostName);
lastTwo = hostName.split('.');
lastTwo = lastTwo.length>2?lastTwo.slice(Math.max(lastTwo.length - 2, 1)) : lastTwo;
onlyMainDomain = lastTwo.join('.');
console.log('only main domain:', onlyMainDomain);
var email = "someone#ora.co.in";
var emailDomain = email.split('#')[1];
console.log('email domain:', emailDomain);
console.log("valid?" , emailDomain === onlyMainDomain);
//check if email domain is a child of hostName
emailDomainRev = emailDomain.split('.').reverse();
hostNameRev = hostName.split('.').reverse();
var emailDomainIsChildOfHostName = true;
if(emailDomainRev.length > hostNameRev.length){
emailDomainIsChildOfHostName = false;
}
else{
emailDomainIsChildOfHostName = emailDomainRev.reduce(function(acc, item, index){
return acc && (item === hostNameRev[index]);
},true);
}
console.log("email domain is a child of host name:", emailDomainIsChildOfHostName);
Here is a simple JavaScript process to validate email with your domain name.
function ValidateEmail(email) {
var re = /\S+#\S+\.\S+/; /*Regular expression for valid email*/
return re.test(email); /*Return `true` if valid, Otherwise return `false`*/
}
var domain = 'www.example#example.com';
var email ='emaxple#example.com';
if(ValidateEmail(email)){
email = email.split('#'); /* Split email after `#` Sign*/
email = email[1] /*After split, `email[0]=emaxple, email[1]=emaxple.com`*/
domain = domain.split('').reverse().join(''); /*Now `domain = moc.elpmaxe#elpmaxe.www`*/
email = email.split('').reverse().join(''); /*Now `email = moc.elpmaxe*/
email = email + '#'; /*Now `email = moc.elpmaxe#`*/
if(domain.indexOf(email)==0){ /*If only return `0` then valid, Otherwise Invalid*/
/*Valid with your domain*/
}else{
/*Doesn't match with your domain*/
}
}else{
/*Invalid Email*/
}
I've added the regular expression Wiktor suggested with a minor change to accept url without protocol.
Your code would look like this:
$(document).ready(function(){
$("#target").submit(function(event) {
var website = $("#website").val();
var websiteDomain = website.replace(/^(https?:\/\/)?(?:www\.)?/, "");
var email = $("#email").val();
var emailDomain = email.substr(email.indexOf("#")+1);
$("span").text(websiteDomain === emailDomain ? "Valid!" : "Not valid!" ).show()
event.preventDefault();
});
});
There is a tricky part to your question. Technically, you can have a domain with any number of parts. For example: this.is.a.valid.domain.com
With the new custom top-level domains, it can get even trickier, since they make it possible to have all kinds of crazy combinations and lengths. For example: this.is.also.a.valid.name.on.the.top.level.cake
Looks nothing like a domain, but if you owned the top-level domain cake, you could make it happen.
So, you can't really trim off the sub-domain and ensure that www.example.com results in an email #example.com. However, you can tell if it's on at least #www.example.com, #example.com or #com, which could all be valid. (In reality, you couldn't have one on any of the controlled top-level domains, but it's probably good to allow it for those rare cases.)
This is why most websites require you to click a link in an email sent to you to validate your URL.
Using the above criteria I just described, you can do it with this:
var website = "http://www.example.com"; // website from form
var email = "me#example.com"; // email from form
var emailDomain = email.split('#')[1];
var websiteDomain = website.match(/^(?:https?:\/\/)?([^\/]+)/)[1];
var isValidEmail = (websiteDomain || '').lastIndexOf(emailDomain) === (websiteDomain || '').length - (emailDomain || '').length;
isValidEmail will then contain true if it is a valid match, or false if it isn't.
I've added checks for if something fails above so it won't throw an error if one of the above parts are bad. If you're giving an invalid website, websiteDomain will be undefined. Likewise for a completely invalid email, emailDomain will be `undefined.
I update your code. I give you the link here
https://jsfiddle.net/zm7e8r7p/5/
$(document).ready(function(){
$( "#target" ).submit(function(event) {
event.preventDefault();
var emailString = $("#email").val();
//cut rule by #
var afterAt = emailString.split('#');
var val = $("#website").val();
var myString = val.substr(-(afterAt[1].length));
console.log(afterAt[1].length);
if (myString == afterAt[1]){
console.log('works');return
}else{
console.log('not');return
};
});
});
I tried to validate url with or without http No matter what i did the function return false.
I checked my regex string in this site:
http://regexr.com/
And its seen as i expect.
function isUrlValid(userInput) {
var regexQuery = "/(http(s)?://.)?(www\.)?[-a-zA-Z0-9#:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*)/";
var url = new RegExp(regexQuery,"g");
if (url.test(userInput)) {
alert('Great, you entered an E-Mail-address');
return true;
}
return false;
}
I fix the problem by change the .test to .match and leave the regex as is.
I change the function to Match + make a change here with the slashes and its work: (http(s)?://.)
The fixed function:
function isUrlValid(userInput) {
var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9#:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*)/g);
if(res == null)
return false;
else
return true;
}
I believe the other answer will reject some valid url's (like domain names in uppercase or long sub-domains) and allow some invalid ones (like http://www.-example-.com or www.%#&.com). I tried to take into account a number of additional url syntax rules (without getting into internationalisation).
function isUrlValid(userInput) {
var regexQuery = "^(https?://)?(www\\.)?([-a-z0-9]{1,63}\\.)*?[a-z0-9][-a-z0-9]{0,61}[a-z0-9]\\.[a-z]{2,6}(/[-\\w#\\+\\.~#\\?&/=%]*)?$";
var url = new RegExp(regexQuery,"i");
return url.test(userInput);
}
var input = ["https://o.sub-domain.example.com/foo/bar?foo=bar&boo=far#a%20b",
"HTTP://EX-AMPLE.COM",
"example.c",
"example-.com"];
for (var i in input) document.write(isUrlValid(input[i]) + ": " + input[i] + "<br>");
To also allow IP addresses and port numbers, the regex is:
"^(https?://)?(((www\\.)?([-a-z0-9]{1,63}\\.)*?[a-z0-9][-a-z0-9]{0,61}[a-z0-9]\\.[a-z]{2,6})|((\\d{1,3}\\.){3}\\d{1,3}))(:\\d{2,4})?(/[-\\w#\\+\\.~#\\?&/=%]*)?$"
To also allow query strings without a slash between the domain name and the question mark (which is theoretically not allowed, but works in most real-life situations), the regex is:
"^(https?://)?(((www\\.)?([-a-z0-9]{1,63}\\.)*?[a-z0-9][-a-z0-9]{0,61}[a-z0-9]\\.[a-z]{2,6})|((\\d{1,3}\\.){3}\\d{1,3}))(:\\d{2,4})?((/|\\?)[-\\w#\\+\\.~#\\?&/=%]*)?$"
To also make sure that every % is followed by a hex number, the regex is:
"^(https?://)?(((www\\.)?([-a-z0-9]{1,63}\\.)*?[a-z0-9][-a-z0-9]{0,61}[a-z0-9]\\.[a-z]{2,6})|((\\d{1,3}\\.){3}\\d{1,3}))(:\\d{2,4})?((/|\\?)(((%[0-9a-f]{2})|[-\\w#\\+\\.~#\\?&/=])*))?$"
(Note: as John Wu mentioned in a comment, there are valid single-letter domains).
Actually, this question needs a powerful regex and the following code is not very hard to understand, please see below(ES6 - TypeScript):
const isValidUrl = (url: string): boolean => {
const urlRegex = /^((http(s?)?):\/\/)?([wW]{3}\.)?[a-zA-Z0-9\-.]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/g;
const result = url.match(urlRegex);
return result !== null;
};
Try this code.
function CheckURL(fieldId, alertMessage) {
var url = fieldId.value;
if(url !== "")
{
if (url.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9#:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*)/g) !== null)
return true;
else {
alert(alertMessage);
fieldId.focus();
return false;
}
}
}
var website = document.getElementById('Website');
if (!CheckURL(website, "Enter a valid website address")) {
return false;
}
I want to validate input as I type so I use onkeyup event to do so, but if I validate an email regex "name#domain.com", as soon as user starts to type it throws an error - first character doesnt match regex...
So I wrote this:
var addValidation = function (patterns) {
var index = patterns.length; //I know I can avoid this
while (index--) {
patterns[index] = new RegExp(patterns[index]);
}
index = 0;
var current = patterns[index],
matchExact = function (patt, str) {
var match = str.match(patt);
return match !== null && str === match[0];
};
return function () {
var str = this.value;
if (!matchExact(current, str) ) {
var tmp = patterns[index + 1] ?
new RegExp(current.source + patterns[index + 1].source) :
false;
if (tmp && matchExact(tmp, str)) {
current = tmp;
index++;
}
else {
alert("Wrong");
}
}
}
};
document.getElementById("x").onkeyup = addValidation(["[a-zA-Z0-9\\.]+", "#{1}", "[a-zA-Z0-9]+", "\\.{1}", "[a-zA-Z]{1,3}"]);
It seems to work, but... it's ugly and it will alert you if you do step back (eg. "name#" and you press backspace).
I know that Dojo's validation is great, but I do not want to use Dojo. Are there any better ways to achieve that?
//EDIT: http://livedocs.dojotoolkit.org/dijit/form/ValidationTextBox this is an example, but you can define your own pattern (like email regex) and it will validate it perfectly.
Add interval before validation will start:
var t;
document.getElementById("x").onkeyup = function () {
if (t) {
clearTimeout(t);
}
t = setTimeout(function () {
//do validation
}, 1000)
}
Don't ever try to validate an email address with a regualr expression. You'll either end up allowing addresses which are not valid, or block email addresses which are perfectly valid and just annoy your visitors. It's also worth bearing in mind that the best regex so far for validating email addresses is this:
http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html