Develop Reference

How does one safely pass a url and filename as part of a query string?

Say I have a url: http://foo.com
Normally if I wanted to pass any parameters to it I would do something like:
http://foo.com?param1=car&param2=red
But what if I wanted to pass a url and filename instead ?
I can't just do this:
http://foo.com?url=http://bar.com/kitty.jpg&filename=kitty.jpg
Because there are a number of characters that I might have to escape. I create the url in javascript, so I can use the Javascript API to construct the url. Any suggestion on how to do this, and which pitfalls to watch out for ? How to safely create the url?

All you need is encodeURIComponent - simple example:
var url='http://bar.com/kitty.jpg';
var filename='kitty.jpg';
var completeUrl='http://foo.com'+
'?url='+encodeURIComponent(url)+
'&filename='+encodeURIComponent(filename);

HTML Append Variable to Query String

I have http://localhost/?val=1
When I click on a link, is there a way this link can append a query variable to the current string, for example:
Link
so when I click it the url would be:
http://localhost/?val=1&var2=2
but when I click the link it removes the first query string and looks like
http://localhost/&var2=2
Is such a thing possible with normal HTML?

You can't do that using only html, but you can do it with js or php:
Using JS:
<a onclick="window.location+=((window.location.href.indexOf('?')+1)?'':'?')+'&var2=2'">Link</a>
Using Php:
Link
Notice 1: make sure you don't have the new variable in the current link, or it'll be a loop of the same variable
Notice 2: this is not a professional way, but it could work if you need something fast.

Basically you want to get your current URL via JavaScript with:
var existingUrl = window.location.href; // http://localhost/?val=1
Then append any Query Strings that are applicable using:
window.location.href = existingUrl + '&var2=2';
or some other similar code. Take a look at this post about Query Parameters.
Note: A link would already have to exist with an OnClick event that calls a function with the above code in it for it to work appropriately.
Now obviously this isn't very useful information on it's own, so you are going to want to do some work either in JavaScript or in Server code (through use of NodeJS, PHP, or some other server-side language) to pass those variable names and their values down so that the button can do what you are wanting it to do.
You will have to have some logic to make sure the query parameters are put in the URL correctly though. I.E. if there is only one query param it's going to look like '?var1=1' and if it's any subsequent parameter it's going to look like '&var#=#'.

replace current url without reloading the page

I want to take the current URL from browser and replace the last number param by other number, my example URL:
app#!folder/1/document?p=1
the param to replace - ?p=1 into ?p=3
the param number is generated dynamically so I have to take the param from URL
I want to execute this JavaScript as String,
thanks a lot for any help

I reslove the problem(VAADIN FRAMEWROK) without using javascript
String url = Page.getCurrent().getUriFragment().toString();
url = url.replaceAll("\\?p=([0-9])?", "?p=1");
Page.getCurrent().setUriFragment(url, true);

Unless I'm missing something, just use String#replace() like so
url = url.replace("?p=1", "?p=3");

Note that a modification to the current URL will reload the page unless it happens in the hash part (after the # character), which is obviously what you're trying to do.
The current URL can be modified in javascript via the location.href variable:
location.href = location.href.replace("p=1", "p=3");

Redirect URL paths included with Javascript

I have seen several questions about redirecting to a page via javascript, and that's great, but all of them just redirect to a base url. I want to include a variable path. So say for instance I have http://www.glas.com/my/url/path I want to use window.location.replace() to replace the glas part only, and change it to glass. I'm a beginner at JavaScript so any help would be much appreciated.
This is what I have tried so far:
var path = ''; // this is where I'm stuck
window.location.replace("http://www.glass.com/" + path);
Where the path variable would parse the current URL for anything after the /. I have tried looking at JavaScript's match and regexp, but it all seems very confusing.

Try
window.location = window.location.href.replace('glas', 'glass');

You would do something like:
window.location.href = window.location.href.replace('glas','glass');

get query string into js/jquery

i hae a link like ( domain.com/jsapi?key=123456 )
hov can i get this "key" into my JS code? i use jQuery and i don't know about its are easy way to get this "key" into JS variable.
tanks for all.

This plugin might helps: jquery url parser
key = $.url.setUrl($(yourlink).attr('href')).param('key');
(not tested)

It's not jquery. It's pure javascript. You can use regexp.
str = "domain.com/jsapi?key=123456" # Take it from wherever you want
splitted = str.split(/\?key=([0-9]+)/)
Then you'll have an array in the "splitted" variable, it's second element (at the id 1) containing the value.

jQuery not needed. The query string is available from the DOM:
window.location.search.match(/key=([^&]*)/);
Which gives you an array that has your value in it.

You can use the URL constructor as follows:
let url = new URL('https://example.com/jsapi?key=123456');
console.log(url.searchParams.get('key')); // Outputs 123456
Using this method you can parse and get any part of a URL.
Important:
Note that I've added the protocol (https://) to the sample URL so I make sure it is a valid URL and it can be parsed.
Take into account the browser compatibility. You can check it here
For more details you can also the the specification.