Getting specific value from url query string

Question

I have the following URL, and I want to get the "id" value from it using JavaScript.

https://www.blabla.com/ebookedit?id=B0077RQGX4&commit=Go

I started with this code:

var url = document.URL;
var id_check = /^\id...\E; // NOT SURE HERE
var final_id = new RegExp(id_check,url);

I want to extract the id "B0077RQGX4" and save it into a variable that I would later modify. How would I do it and which functions would I use in JavaScript?

Answer 1

I came up with this:

var final_id;
var url = document.URL;
var id_check = /[?&]id=([^&]+)/i;
var match = id_check.exec(url);
if (match != null) {
 final_id = match[1];
} else {
 final_id = "";
}

Works for:

https://www.blabla.com/ebookedit?id=B0077RQGX4&commit=Go
final_id = 'B0077RQGX4'
https://www.blabla.com/ebookedit?SomethingElse=Something&id=B0077RQGX4&commit=Go
final_id = 'B0077RQGX4'
https://www.blabla.com/ebookedit?commit=go&id=B0077RQGX4
final_id = 'B0077RQGX4'
https://www.blabla.com/ebookedit?commit=Go
final_id = ''
https://www.blabla.com/ebookedit?id=1234&Something=1&id=B0077RQGX4&commit=Go
final_id = '1234'

• TLS: What happens when id appears in the query string more than once with this approach?
• Adri V.: it will return the first id value

Answer 2

(削除) While you can do this with Regex, it's probably going to be easier and/or more consistent if you use a non-Regex approach. This is the case because the query string could have a wide variety of layouts (with the id value first, last, or in the middle). (削除ここまで)

EDIT: @AdrianaVillafañe proves that this can be done easily with a Regex! I'm going to leave this JS-only method here because it does work.

I like to use this JavaScript method to parse query string from a URL and get the first value that matches the desired name. In your case, "id" would be the name parameter.

// parses the query string provided and returns the value
function GetQueryVariable(query, name) {
 if (query.indexOf("?") == 0) { query = query.substr(1); }
 var pairs = query.split("&");
 for (var i = 0; i < pairs.length; i++) {
 var pair = pairs[i].split("=");
 if (pair[0] == name) {
 return pair[1];
 }
 }
 return "";
}

To use this method, you would pass in the query string portion of the URL and the name of the value that you want to get. If you want to parse the URL of the current request, you could do this:

var value = GetQueryVariable(location.search, "id");

(削除) Trying to do this in a Regex will most likely be inconsistent at best when trying to handle the possible variations of the query string layout. (削除ここまで)

• kafuchau: RegExps are so much fun! But your approach is definitely the safer one. +1
• TLS: I tried for a while (many months ago) to devise a single Regex that would do this action, but I ultimately concluded that this multi-line JS function would be more consistent (and would actually work!). Be sure to accept the best answer that helps you solve your issue.
• qw3n: @TLS If the need warranted you could do something similar, but return an object that had all the data as property and value pairs pretty easily. Split on & and then loop through splitting on =.
• TLS: @qw3n - I actually have a separate method that returns the whole name/value pair rather than just the value. You're right it wouldn't be too difficult to have it return all matching name/value pairs.

Answer 3

Just try this.

function getUrlVars()
{
 var vars = {};
 var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) 
 {
 vars[key] = value;
 });
 return vars;
} 
function urlval()
{
 var x=getUrlVars()["id"];
 alert (x);
 }

Now x will give value in the id as B0077RQGX4

Answer 4

Well it isn't regex but you could just do

id=url.split('id=')[1].split('&')[0];

• kafuchau: That assumes that the id is always the first parameter.

Answer 5

Something like this should work.

var url = document.URL;
var regex = new RegExp("id=(.+)&");
var id = url.match(regex)[1];​​​​​​

Example jsfiddle here.

• TLS: This assumes that the "id" is not the last entry in the query string.
• kafuchau: Mmmyep. Adriana's regex is better.

Answer 6

The following works very well and is much easier to understand than most of the solutions I have found.

<script>
//Pulls the variables from a URL and saves them
function $_GET(q,s) {
 s = (s) ? s : window.location.search;
 var re = new RegExp('&'+q+'=([^&]*)','i');
 return (s=s.replace(/^\?/,'&').match(re)) ?s=s[1] :s='';
}
//Get the variables value
var urlvariablevalue = $_GET('id');
//Display the Value of the id from the URL
document.write(urlvariablevalue);
</script>