Как добавить или заменить параметр запроса в URL-адресе с помощью Javascript/jQuery?

Question

Я использую jQuery 1.12. Я хочу заменить параметр строки запроса в строке запроса URL-адреса окна или добавить параметр, если он раньше не существовал. Я попытался ниже:

new_url = window.location.href.replace(/[\?#].*|$/, "?order_by=" + data_val) 
window.location.href = new_url 

но то, что я открывать то, что это стирает все предыдущие параметры в Teh строке запроса, которые я не хочу. Если строка запроса:

?a=1&b=2 

Я хотел бы, чтобы новая строка запроса будет:

?a=2&b=2&order_by=data 

и если строка запроса была:

?a=2&b=3&order_by=old_data 

он стал бы:

?a=2&b=3&order_by=data 

Answer 1

Вы можете использовать плагин JQuery, чтобы сделать всю тяжелую работу за вас. Он будет анализировать строку запроса, а также восстанавливать обновленную строку запроса для вас. Гораздо меньше кода для решения.

Plugin Download Page
Github Repo

// URL: ?a=2&b=3&order_by=old_data 

var order_by = $.query.get('order_by'); 
//=> old_data 

// Conditionally modify parameter value 
if (order_by) { 
    order_by = “data”; 
} 

// Inject modified parameter back into query string 
var newUrl = $.query.set(“order_by”, order_by).toString(); 
//=> ?a=2&b=3&order_by=data 

Для тех, кто использует Node.js, есть пакет для этого имеющегося в НОМ.

NPM Package
Github Repo

var queryString = require('query-string'); 
var parsed = queryString.parse('?a=2&b=3&order_by=old_data'); // location.search 

// Conditionally modify parameter value 
if (parsed.order_by) { 
    parsed.order_by = 'data'; 
} 

// Inject modified parameter back into query string 
const newQueryString = queryString.stringify(parsed); 
//=> a=2&b=3&order_by=data 

Answer 2

что-то вроде этого?

new_url = ""; 

if(window.location.search && window.location.search.indexOf('order_by=') != -1) 
    new_url = window.location.search.replace(/order_by=\w*\d*/, "order_by=" + data_val); 
else if(window.location.search) 
    new_url = window.location.search + "&order_by=" + data_val; 
else 
    new_url = window.location.search + "?order_by=" + data_val; 

window.location.href = new_url; 

Answer 3

function addOrReplaceOrderBy(newData) { 
 
    var stringToAdd = "order_by=" + newData; 
 

 
    if (window.location.search == "") 
 
    return window.location.href + stringToAdd; 
 

 
    if (window.location.search.indexOf('order_by=') == -1) 
 
    return window.location.href + stringToAdd; 
 

 
    var newSearchString = ""; 
 
    var searchParams = window.location.search.substring(1).split("&"); 
 
    for (var i = 0; i < searchParams.length; i++) { 
 
    if (searchParams[i].indexOf('order_by=') > -1) { 
 
     searchParams[i] = "order_by=" + newData; 
 
     break; 
 
    } 
 
    } 
 
    return window.location.href.split("?")[0] + "?" + searchParams.join("&"); 
 
} 
 

 
window.location.href = addOrReplaceOrderBy("new_order_by");

Немного долго, но я думаю, что это работает, как предполагалось.

Answer 4

Вы можете удалить параметр из строки запроса с помощью URLSearchParams https://developer.mozilla.org/ru/docs/Web/API/URLSearchParams?param11=val

Пока не поддерживаются IE и Safari, но вы можете использовать его, добавив polyfill https://github.com/jerrybendy/url-search-params-polyfill

И для доступа или модификации части запроса из URI вы должны использовать свойство «search» для window.location.

Рабочий пример кода:

var a = document.createElement("a") 
 
    a.href = "http://localhost.com?param1=val&param2=val2&param3=val3#myHashCode"; 
 
    var queryParams = new URLSearchParams(a.search) 
 
    queryParams.delete("param2") 
 
    a.search = queryParams.toString(); 
 
    console.log(a.href);

Answer 5

Хорошее решение должно обрабатывать все из следующих действий:

1. URL-адрес, который уже имеет параметр order_by запрос, возможно, с пробел перед знаком равенства. Это можно разделить на случаи, когда order_by появляется в начале, середине или конце строки запроса.
2. URL-адрес, который еще не имеет, и параметр запроса order_by, но уже имеет знак вопроса, чтобы разграничить строку запроса.
3. URL-адрес, который еще не имеет и параметр запроса order_by, и еще не имеет знака вопроса, чтобы разграничить строку запроса.

Ниже будет обрабатывать случаи выше:

if (/[?&]order_by\s*=/.test(oldUrl)) { 
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val); 
    } else if (/\?/.test(oldUrl)) { 
    newUrl = oldUrl + "&order_by=" + data_val; 
    } else { 
    newUrl = oldUrl + "?order_by=" + data_val; 
    } 

, как показано ниже:

getNewUrl("?a=1&b=2"); 
 
getNewUrl("?a=2&b=3&order_by=old_data"); 
 
getNewUrl("?a=2&b=3&order_by = old_data&c=4"); 
 
getNewUrl("?order_by=old_data&a=2&b=3"); 
 
getNewUrl("http://www.stackoverflow.com"); 
 

 
function getNewUrl(oldUrl) { 
 
    var data_val = "new_data"; 
 
    var newUrl; 
 
    if (/[?&]order_by\s*=/.test(oldUrl)) { 
 
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val); 
 
    } else if (/\?/.test(oldUrl)) { 
 
    newUrl = oldUrl + "&order_by=" + data_val; 
 
    } else { 
 
    newUrl = oldUrl + "?order_by=" + data_val; 
 
    } 
 
    console.log(oldUrl + "\n...becomes...\n" + newUrl); 
 
}

Answer 6

Попробуйте это:

Для чтения параметров eters:

const data = ['example.com?var1=value1&var2=value2&var3=value3', 'example.com?a=2&b=2&order_by=data'] 
 

 
const getParameters = url => { 
 
    const parameters = url.split('?')[1], 
 
     regex = /(\w+)=(\w+)/g, 
 
     obj = {} 
 
    let temp 
 
    while (temp = regex.exec(parameters)){ 
 
    obj[temp[1]] = decodeURIComponent(temp[2]) 
 
    } 
 
    return obj 
 
} 
 

 
for(let url of data){ 
 
    console.log(getParameters(url)) 
 
}

Для размещения только это параметры:

const data = ['example.com?zzz=asd'] 
 
const parameters = {a:1, b:2, add: "abs"} 
 

 
const setParameters = (url, parameters) => { 
 
    const keys = Object.keys(parameters) 
 
    let temp = url.split('?')[0] += '?' 
 
    for (let i = 0; i < keys.length; i++) { 
 
    temp += `${keys[i]}=${parameters[keys[i]]}${i == keys.length - 1 ? '' : '&'}` 
 
    } 
 
    return temp 
 
} 
 

 
for (let url of data){ 
 
    console.log(setParameters(url, parameters)) 
 
}

И, наконец, для установки (или заменить в то время как существует)

const data = ['example.com?a=123&b=3&sum=126'] 
 
const parameters = {order_by: 'abc', a: 11} 
 
const insertParameters = (url, parameters) => { 
 
    const keys = Object.keys(parameters) 
 
    let result = url 
 
    for (let i = 0; i < keys.length; i++){ 
 
    if (result.indexOf(keys[i]) === -1) { 
 
     result += `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}` 
 
    } else { 
 
     let regex = new RegExp(`${keys[i]}=(\\w+)`) 
 
     result = result.replace(regex, `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}`) 
 
    } 
 
    } 
 
    return result 
 
} 
 

 
for (let url of data){ 
 
    console.log(insertParameters(url, parameters)) 
 
}

Надеется, что это работает для вас;) После использования функции просто заменить window.location.href

Answer 7

Этой небольшой функция может помочь.

function changeSearchQueryParameter(oldParameter,newParameter,newValue) { 
 
var parameters = location.search.replace("?", "").split("&").filter(function(el){ return el !== "" }); 
 
var out = ""; 
 
var count = 0; 
 
if(oldParameter.length>0) { 
 
if(newParameter.length>0 && (newValue.length>0 || newValue>=0)){ 
 
\t out += "?"; 
 
\t var params = []; 
 
\t parameters.forEach(function(v){ 
 
\t \t var vA = v.split("="); 
 
\t \t if(vA[0]==oldParameter) { 
 
\t \t \t vA[0]=newParameter; 
 
\t \t \t if((newValue.length>0 || newValue>=0)) { 
 
\t \t \t vA[1] = newValue; \t \t \t 
 
\t \t \t } 
 
\t \t } else { 
 
\t \t \t count++; 
 
\t \t } 
 
\t \t params.push(vA.join("=")); \t 
 
\t }); 
 
\t if(count==parameters.length) { 
 
\t \t params.push([newParameter,newValue].join("=")); 
 
\t } 
 
    params = params.filter(function(el){ return el !== "" }); 
 
    if(params.length>1) { 
 
    out += params.join("&"); 
 
    } 
 
    if(params.length==1) { 
 
    out += params[0]; 
 
    } \t 
 
} 
 
} else { 
 
if((newParameter.length>0) && (newValue.length>0 || newValue>=0)){ 
 
if(location.href.indexOf("?")!==-1) { 
 
var out = "&"+newParameter+"="+newValue; \t 
 
} else { 
 
var out = "?"+newParameter+"="+newValue; \t 
 
} 
 
} 
 
} 
 
return location.href+out; 
 
} 
 
// if old query parameter is declared but does not exist in url then new parameter and value is simply added if it exists it will be replaced 
 
console.log(changeSearchQueryParameter("ib","idx",5)); 
 
// add new parameter and value in url 
 
console.log(changeSearchQueryParameter("","idy",5)); 
 
// if no new or old parameter are present url does not change 
 
console.log(changeSearchQueryParameter("","",5)); 
 
console.log(changeSearchQueryParameter("","",""));

Answer 8

Чтобы использовать Regex шаблон, я предпочитаю это один:

var oldUrl = "http://stackoverflow.com/"; 
var data_val = "newORDER" ; 
var r = /^(.+order_by=).+?(&|$)(.*)$/i ; 
var newUrl = ""; 

var matches = oldUrl.match(r) ; 
if(matches===null){ 
    newUrl = oldUrl + ((oldUrl.indexOf("?")>-1)?"&":"?") + "order_by=" + data_val ; 
}else{ 
    newUrl = match[1]+data_val+match[2]+match[3] ; 
} 
conole.log(newUrl); 

Если нет order_by не существует, matches является null и order_by=.. должны прийти после того, как ? или & (если другие параметры существуют, требуется новый &).

Если order_by существует, matches имеет 3 пунктов, see here

Answer 9

Может быть, вы могли бы попробовать настройки регулярное выражение для извлечения только значения, которые вы ищете, а затем добавить или обновить их в вспомогательную функцию, что-то вроде этого :

function paramUpdate(param) { 

    var url = window.location.href, 
     regExp = new RegExp(param.key + '=([a-z0-9\-\_]+)(?:&)?'), 
     existsMatch = url.match(regExp); 

    if (!existsMatch) { 
     return url + '&' + param.key + '=' + param.value 
    } 

    var paramToUpdate = existsMatch[0], 
     valueToReplace = existsMatch[1], 
     updatedParam = paramToUpdate.replace(valueToReplace, param.value); 

    return url.replace(paramToUpdate, updatedParam); 
} 

var new_url = paramUpdate({ 
    key: 'order_by', 
    value: 'id' 
}); 
window.location.href = new_url; 

Надеюсь, он хорошо работает для ваших нужд!