Đang cập nhật URL hiện có giá trị chuỗi truy vấn với jQuery

Question

Hãy nói rằng tôi có một url như:

http://www.example.com/hello.png?w=100&h=100&bg=white 

Những gì tôi muốn làm là cập nhật các giá trị của chuỗi truy vấn w và h, nhưng để lại bg chuỗi truy vấn nguyên vẹn Ví dụ:

http://www.example.com/hello.png?w=200&h=200&bg=white 

vì vậy, cách hiệu quả nhất nhanh nhất để đọc các giá trị chuỗi truy vấn (và họ có thể là bất kỳ tập hợp các giá trị chuỗi truy vấn, không chỉ w, h, và bg) là những gì, cập nhật một vài hoặc không ai trong số các giá trị và trả lại url đầy đủ bằng chuỗi truy vấn mới?

Vì vậy:

1. Lấy giá trị của mỗi chuỗi truy vấn chính
2. Cập nhật bất kỳ số lượng các phím
3. Rebuild url với các giá trị mới
4. Giữ tất cả các giá trị khác mà weren' t cập nhật
5. Nó sẽ không có bộ khóa đã biết chuẩn, nó có thể thay đổi theo URL

Answer 1

Nhận các giá trị chuỗi truy vấn này way và sử dụng $.param để xây dựng lại chuỗi truy vấn

UPDATE:

Đây là một ví dụ, cũng kiểm tra fiddle:

function getQueryVariable(url, variable) { 
 
    \t var query = url.substring(1); 
 
    var vars = query.split('&'); 
 
    for (var i=0; i<vars.length; i++) { 
 
      var pair = vars[i].split('='); 
 
      if (pair[0] == variable) { 
 
      return pair[1]; 
 
      } 
 
    } 
 

 
    return false; 
 
    } 
 

 
    var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white'; 
 
     
 
    var w = getQueryVariable(url, 'w'); 
 
    var h = getQueryVariable(url, 'h'); 
 
    var bg = getQueryVariable(url, 'bg'); 
 

 
    // http://www.example.com/hello.png?w=200&h=200&bg=white 
 
    var params = { 'w':200, 'h':200, 'bg':bg }; 
 
    var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

Bạn có thể thay đổi chức năng sử dụng url hiện tại:

function getQueryVariable(variable) { 
 
    \t var query = window.location.search.substring(1); 
 
    var vars = query.split('&'); 
 
    for (var i=0; i<vars.length; i++) { 
 
      var pair = vars[i].split('='); 
 
      if (pair[0] == variable) { 
 
      return pair[1]; 
 
      } 
 
    } 
 

 
    return false; 
 
    }

Answer 2

Một cách khác (không phụ thuộc vào jQuery hoặc các thư viện khác): https://github.com/Mikhus/jsurl

var u = new Url; 
// or 
var u = new Url('/some/path?foo=baz'); 
alert(u); 
u.query.foo = 'bar'; 
alert(u); 

Answer 3

URL của tôi là như thế này: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\\d+/; 
var url = window.location.href; 
url = url.toString(); 
var hrpid = $("#category :selected").val(); //new value to replace hpr_id 
var reExp = new RegExp("[\\?&]" + 'hpr_id' + "=([^&#]*)"), 
delimeter = reExp.exec(url)[0].charAt(0), 
newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid); 
window.location.href = newUrl; 

Đây là cách nó làm việc cho tôi.

Answer 4

//update URL Parameter 
function updateURL(key,val){ 
    var url = window.location.href; 
    var reExp = new RegExp("[\?|\&]"+key + "=[0-9a-zA-Z\_\+\-\|\.\,\;]*"); 

    if(reExp.test(url)) { 
     // update 
     var reExp = new RegExp("[\?&]" + key + "=([^&#]*)"); 
     var delimiter = reExp.exec(url)[0].charAt(0); 
     url = url.replace(reExp, delimiter + key + "=" + val); 
    } else { 
     // add 
     var newParam = key + "=" + val; 
     if(!url.indexOf('?')){url += '?';} 

     if(url.indexOf('#') > -1){ 
      var urlparts = url.split('#'); 
      url = urlparts[0] + "&" + newParam + (urlparts[1] ? "#" +urlparts[1] : ''); 
     } else { 
      url += "&" + newParam; 
     } 
    } 
    window.history.pushState(null, document.title, url); 
} 

Answer 5

Một cách khác bạn có thể làm điều này, sử dụng một số mã reg cũ đơn giản bởi Samuel Santos here như thế này:

/* 
* queryParameters -> handles the query string parameters 
* queryString -> the query string without the fist '?' character 
* re -> the regular expression 
* m -> holds the string matching the regular expression 
*/ 
var queryParameters = {}, queryString = location.search.substring(1), 
     re = /([^&=]+)=([^&]*)/g, m; 

// Creates a map with the query string parameters 
while (m = re.exec(queryString)) { 
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); 
} 

// Update w and h 
queryParameters['w'] = 200; 
queryParameters['h'] = 200; 

Bây giờ bạn có thể tạo ra một URL mới:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname; 

// Build new Query String 
var params = $.param(queryParameters); 
if (params != '') { 
    url = url + '?' + params; 
} 

HOẶC bạn chỉ có thể sử dụng thông số để khiến trình duyệt tải lại ngay lập tức:

location.search = params; 

HOẶC làm bất cứ điều gì bạn muốn với :)

Answer 6

Bạn có thể làm một cái gì đó như thế này:

// If key exists updates the value 
if (location.href.indexOf('key=') > -1) { 
    location.href = location.href.replace('key=current_val', 'key=new_val'); 

// If not, append 
} else { 
    location.href = location.href + '&key=new_val'; 
} 

Trân