what is the difference between encodeURI and decodeUri - javascript

I want to url encode a string in javascript:
but these 2 function calls give the same result:
encodeURI('g0sceq3EkiAQTvyaZ07C+C4SZQz9FaGTV4Zwq4HkAnc=') === decodeURI('g0sceq3EkiAQTvyaZ07C+C4SZQz9FaGTV4Zwq4HkAnc='); // true
both return g0sceq3EkiAQTvyaZ07C+C4SZQz9FaGTV4Zwq4HkAnc=.
Should the + sign and = sign not be encoded?
I thought = would be %3D and + would be %2B?

Use encodeURIComponent and decodeURIComponent. Note, neither function is idempotent; If you accidentally double-encode a component, you will have to double-decode it -
console.log
( encodeURIComponent ("=") // %3D
, decodeURIComponent ("%3D") // =
, encodeURIComponent ("%3D") // %253D
, decodeURIComponent ("%253D") // %3D
, encodeURIComponent (encodeURIComponent ("=")) // %253D
, decodeURIComponent (decodeURIComponent ("%253D")) // =
)

The other answer does not answer your question.
The answer is: you think + should be encoded but it is a safe URI character. See Safe characters for friendly url
const a = encodeURI("a%")
const b = decodeURI("a")
console.log(a)
console.log(b)
console.log(a === b) /// false

Related

Javascript , encodeURI failed to encode round bracket "("

I have cookie value which contains round bracket " e.g: demo (1)"
When I try to encode with encodeURI , the round bracket ( is not encoded to %28 , what is the alternative to encode the special characters like round brackets
encodeURI() encodes special characters, except: , / ? : # & = + $ #.
One can use encodeURIComponent() to encode the above character.
You can write custom method to encode ( to %28.
Example :
var uri = "my test.asp?(name";
var res = encodeURI(uri);
res.replace("(", "%28");
As pointed out in the comment below, string#replace will remove the first occurrence, one can use string#replaceAll i.e. res.replaceAll("(", "%28") or string#replace with global flag i.e. res.replace(/\(/g, "%28") to remove all occurrences.
const uri = "my test.asp?(n(a(m(e",
res = encodeURI(uri);
console.log(res.replaceAll("(", "%28"));
NOTE :
encodeURI() will not encode: ~!##$&*()=:/,;?+'
encodeURIComponent() will not encode: ~!*()'
To encode uri components to be RFC 3986 -compliant - which encodes the characters !'()* - you can use:
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
Taken from just before Examples-section at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
For reference, see: https://www.rfc-editor.org/rfc/rfc3986
encodeURI only encodes reserved characters so this function should not be expected to encode parentheses.
You could write your own function to encode all the characters in the string, or just create a custom list of characters you want to encode.
Fiddle
function superEncodeURI(url) {
var encodedStr = '', encodeChars = ["(", ")"];
url = encodeURI(url);
for(var i = 0, len = url.length; i < len; i++) {
if (encodeChars.indexOf(url[i]) >= 0) {
var hex = parseInt(url.charCodeAt(i)).toString(16);
encodedStr += '%' + hex;
}
else {
encodedStr += url[i];
}
}
return encodedStr;
}
Based on encodeURIComponent docs by Mozilla
encodeURIComponent escapes all characters except:
A-Z a-z 0-9 - _ . ! ~ * ' ( )
So, the only characters we don't want to scape are: A-Z a-z 0-9.
So this function does it:
function encodeUriAll(value) {
return value.replace(/[^A-Za-z0-9]/g, c =>
`%${c.charCodeAt(0).toString(16).toUpperCase()}`
);
}

Base64 encoded String URL friendly

I'm using this function for base64 decode/encode URL in javascript but i've seen many gives notice about making Base64 encoded String URL friendly and to use
// if this is your Base64 encoded string
var str = 'VGhpcyBpcyBhbiBhd2Vzb21lIHNjcmlwdA==';
// make URL friendly:
str = str.replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');
// reverse to original encoding
str = (str + '===').slice(0, str.length + (str.length % 4));
str = str.replace(/-/g, '+').replace(/_/g, '/');
jsfiddle
I see it only replce + with - and \ with _ so what is the point! i mean why should i?
If you would not replace the characters they could get misinterpreted, like pointed out in this answer. This would result in either displaying wrong content or more likely displaying nothing.
For explanation:
In URLs the follwing characters are reserved: : / ? # [ ] # : $ & ' ( ) * + , ; =
Like pointed out in this answer you need 65 characters to encode data, but the sum of uppercase-, lowercase characters and digits is only 62. So it needs three additional characters which are + = /. These three are reserved. So you need to replace them. As of right now I am not entirely sure about -.

How to remove the first and the last character of a string

I'm wondering how to remove the first and last character of a string in Javascript.
My url is showing /installers/ and I just want installers.
Sometimes it will be /installers/services/ and I just need installers/services.
So I can't just simply strip the slashes /.
Here you go
var yourString = "/installers/";
var result = yourString.substring(1, yourString.length-1);
console.log(result);
Or you can use .slice as suggested by Ankit Gupta
var yourString = "/installers/services/";
var result = yourString.slice(1,-1);
console.log(result);
Documentation for the slice and substring.
It may be nicer one to use slice like :
string.slice(1, -1)
I don't think jQuery has anything to do with this. Anyway, try the following :
url = url.replace(/^\/|\/$/g, '');
If you dont always have a starting or trailing slash, you could regex it. While regexes are slower then simple replaces/slices, it has a bit more room for logic:
"/installers/services/".replace(/^\/?|\/?$/g, "")
# /installers/services/ -> installers/services
# /installers/services -> installers/services
# installers/services/ -> installers/services
The regex explained:
['start with' ^] + [Optional?] + [slash]: ^/?, escaped -> ^\/?
The pipe ( | ) can be read as or
['ends with' $] + [Optional ?] + [slash] -> /?$, escaped -> \/?$
Combined it would be ^/?|/$ without escaping. Optional first slash OR optional last slash.
Technically it isn't "optional", but "zero or one times".
You can do something like that :
"/installers/services/".replace(/^\/+/g,'').replace(/\/+$/g,'')
This regex is a common way to have the same behaviour of the trim function used in many languages.
A possible implementation of trim function is :
function trim(string, char){
if(!char) char = ' '; //space by default
char = char.replace(/([()[{*+.$^\\|?])/g, '\\$1'); //escape char parameter if needed for regex syntax.
var regex_1 = new RegExp("^" + char + "+", "g");
var regex_2 = new RegExp(char + "+$", "g");
return string.replace(regex_1, '').replace(regex_2, '');
}
Which will delete all / at the beginning and the end of the string. It handles cases like ///installers/services///
You can also simply do :
"/installers/".substring(1, string.length-1);
You can use substring method
s = s.substring(0, s.length - 1) //removes last character
another alternative is slice method
if you need to remove the first leter of string
string.slice(1, 0)
and for remove last letter
string.slice(0, -1)
use .replace(/.*\/(\S+)\//img,"$1")
"/installers/services/".replace(/.*\/(\S+)\//img,"$1"); //--> services
"/services/".replace(/.*\/(\S+)\//img,"$1"); //--> services
It is too nicer shortcode.
response.data.slice(1,-1) // "Prince"
-> Prince
url=url.substring(1,url.Length-1);
This way you can use the directories if it is like .../.../.../... etc.

Decoding URL parameters with JavaScript

This should be a simple task, but I can't seem to find a solution.
I have a basic string that is being passed through as a query string parameter like this one: This+is+a+message+with+spaces. I would like to decode that parameter using JavaScript to This is a message with spaces, but I cannot seem to get it to decode.
I've tried decodeURI('This+is+a+message+with+spaces') but the result still contains the + signs.
Yes it is true that decodeURIComponent function doesn't convert + to space. So you have to replace the + using replace function.
Ideally the below solution works.
var str_name = 'This+is+a+message+with+spaces';
decodeURIComponent((str_name + '').replace(/\+/g, '%20'));
Like it was pointed out already, decodeURI function doesn't convert + to space, but there are some things worth to realize here:
decodeURI is meant to be used for whole URI, i.e. it doesn't decode separators like ?, &, =, +, etc.
for decoding parameters decodeURIComponent should be used
(worth to have a look at: What is the difference between decodeURIComponent and decodeURI? )
string that you are trying to decode might actually contain + encoded as %2B, thus you should not replace + after the conversion since you might lost + signs that you actually want there, e.g. something?num=%2B632+905+123+4567 should become:
something?num=+632 905 123 4567
since you are probably going to extract the number: +632 905 123 4567
So the correct way to do this is:
var str = 'something?num=%2B632+905+123+4567';
decodeURIComponent( str.replace(/\+/g, '%20') );
The plus sign is not encoded/decoded. To see the decode function working, you need to pass a encoded URI first. Take a look:
encodeURI( "http://www.foo.com/bar?foo=foo bar jar" )
Will generate: http://www.foo.com/bar?foo=foo%20bar%20jar, i.e., the encoded URI.
decodeURI( "http://www.foo.com/bar?foo=foo%20bar%20jar" )
Will generate: http://www.foo.com/bar?foo=foo bar jar, i.e., the decoded URI.
The below code will decode and gives you the params in form of objects
export function getParamsFromUrl(url) {
url = decodeURI(url);
if (typeof url === 'string') {
let params = url.split('?');
let eachParamsArr = params[1].split('&');
let obj = {};
if (eachParamsArr && eachParamsArr.length) {
eachParamsArr.map(param => {
let keyValuePair = param.split('=')
let key = keyValuePair[0];
let value = keyValuePair[1];
obj[key] = value;
})
}
return obj;
}
}
I created my own string methods to support the needed encoding/decoding. These methods will handle the + encoding and decoding properly, allowing you to have plusses (+) in your string and still have the original spaces be encoded as +'s.
String.prototype.plusEncode = function() {
return encodeURIComponent(this).replace(/\%20/gm,"+");
}
String.prototype.plusDecode = function() {
return decodeURIComponent(this.replace(/\+/gm,"%20"));
}

Javascript regular expression: remove first and last slash

I have these strings in javascript:
/banking/bonifici/italia
/banking/bonifici/italia/
and I would like to remove the first and last slash if it's exists.
I tried ^\/(.+)\/?$ but it doesn't work.
Reading some post in stackoverflow I found that php has trim function and I could use his javascript translation (http://phpjs.org/functions/trim:566) but I would prefer a "simple" regular expression.
return theString.replace(/^\/|\/$/g, '');
"Replace all (/.../g) leading slash (^\/) or (|) trailing slash (\/$) with an empty string."
There's no real reason to use a regex here, string functions will work fine:
var string = "/banking/bonifici/italia/";
if (string.charAt(0) == "/") string = string.substr(1);
if (string.charAt(string.length - 1) == "/") string = string.substr(0, string.length - 1);
// string => "banking/bonifici/italia"
See this in action on jsFiddle.
References:
String.substr
String.charAt
In case if using RegExp is not an option, or you have to handle corner cases while working with URLs (such as double/triple slashes or empty lines without complex replacements), or utilizing additional processing, here's a less obvious, but more functional-style solution:
const urls = [
'//some/link///to/the/resource/',
'/root',
'/something/else',
];
const trimmedUrls = urls.map(url => url.split('/').filter(x => x).join('/'));
console.log(trimmedUrls);
In this snippet filter() function can implement more complex logic than just filtering empty strings (which is default behavior).
Word of warning - this is not as fast as other snippets here.
One liner, no regex, handles multiple occurences
const trimSlashes = str => str.split('/').filter(v => v !== '').join('/');
console.log(trimSlashes('/some/path/foo/bar///')); // "some/path/foo/bar"
Just in case that someone needs a premature optimization here...
http://jsperf.com/remove-leading-and-trailing-slashes/5
var path = '///foo/is/not/equal/to/bar///'
var count = path.length - 1
var index = 0
while (path.charCodeAt(index) === 47 && ++index);
while (path.charCodeAt(count) === 47 && --count);
path = path.slice(index, count + 1)
you can check with str.startsWith and str.endsWith
then substr if exist
var str= "/aaa/bbb/";
var str= str.startsWith('/') ? str.substr(1) : str;
var str= str.endsWith('/') ? str.substr(0,str.length - 1) : str;
or you can write custom function
trimSlashes('/aaa/bbb/');
function trimSlashes(str){
str= str.startsWith('/') ? str.substr(1) : str;
str= str.endsWith('/') ? str.substr(0,str.length - 1) : str;
return str;
}

Categories

Resources