ejemplo - ¿Cómo agregar o reemplazar un parámetro de consulta en una URL usando Javascript/jQuery?
remove attribute jquery (9)
Estoy usando jQuery 1.12. Quiero reemplazar un parámetro de cadena de consulta en la cadena de consulta URL de mi ventana, o agregar el parámetro si no existía antes. Intenté lo siguiente:
new_url = window.location.href.replace( /[/?#].*|$/, "?order_by=" + data_val )
window.location.href = new_url
pero lo que estoy descubriendo es que esto borra todos los parámetros previos en la cadena de consulta, que no quiero. Si la cadena de consulta es:
?a=1&b=2
Me gustaría que la nueva cadena de consulta sea:
?a=2&b=2&order_by=data
y si la cadena de consulta fue:
?a=2&b=3&order_by=old_data
se convertiría en:
?a=2&b=3&order_by=data
¿algo como esto?
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;
Puede eliminar el parámetro de la cadena de consulta utilizando URLSearchParams https://developer.mozilla.org/ru/docs/Web/API/URLSearchParams?param11=val
Aún no es compatible con IE y Safari, pero puede usarlo agregando polyfill https://github.com/jerrybendy/url-search-params-polyfill
Y para acceder o modificar parte de la consulta del URI debe usar la propiedad "buscar" de la ventana.location.
Ejemplo de código de trabajo:
var a = document.createElement("a")
a.href = "http://localhost.com?param1=val¶m2=val2¶m3=val3#myHashCode";
var queryParams = new URLSearchParams(a.search)
queryParams.delete("param2")
a.search = queryParams.toString();
console.log(a.href);
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");
Un poco largo, pero creo que funciona según lo previsto.
Prueba esto:
Para leer los parámetros:
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))
}
Para colocar solo estos parámetros:
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))
}
Y finalmente para insertar (o reemplazar si existe)
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))
}
Espero que esto funcione para ti;) Después de usar la función simplemente reemplaza window.location.href
Una buena solución debe manejar todo lo siguiente:
- Una URL que ya tiene un parámetro de consulta
order_by
, opcionalmente con espacios en blanco antes del signo igual. Esto se puede dividir en casos dondeorder_by
aparece al inicio, en el medio o al final de la cadena de consulta. - Una URL que aún no tiene y
order_by
parámetro de consulta, pero que ya tiene un signo de interrogación para delimitar la cadena de consulta. - Una URL que aún no tiene y
order_by
parámetro de consulta y no tiene un signo de interrogación para delimitar la cadena de consulta.
Lo siguiente manejará los casos anteriores:
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;
}
como se demuestra a continuación:
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..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);
}
Esta pequeña función podría ayudar.
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)){
out += "?";
var params = [];
parameters.forEach(function(v){
var vA = v.split("=");
if(vA[0]==oldParameter) {
vA[0]=newParameter;
if((newValue.length>0 || newValue>=0)) {
vA[1] = newValue;
}
} else {
count++;
}
params.push(vA.join("="));
});
if(count==parameters.length) {
params.push([newParameter,newValue].join("="));
}
params = params.filter(function(el){ return el !== "" });
if(params.length>1) {
out += params.join("&");
}
if(params.length==1) {
out += params[0];
}
}
} else {
if((newParameter.length>0) && (newValue.length>0 || newValue>=0)){
if(location.href.indexOf("?")!==-1) {
var out = "&"+newParameter+"="+newValue;
} else {
var out = "?"+newParameter+"="+newValue;
}
}
}
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("","",""));
Para usar el patrón Regex, prefiero este:
var oldUrl = "http://.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);
Si no existe order_by
existe, matches
es null
y order_by=..
debería venir después ?
o &
(si existen otros parámetros, uno nuevo necesita &
).
Si order_by
exist, matches
tiene 3 elementos, mira aquí
Puede usar un plugin jQuery para hacer todo el trabajo pesado por usted. Analizará la cadena de consulta y también reconstruirá la cadena de consulta actualizada por usted. Mucho menos código para tratar.
Página de descarga de complementos
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
Para aquellos que usan Node.js, hay un paquete para esto disponible en NPM.
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
Tal vez podrías intentar ajustar la expresión regular para recuperar solo los valores que estás buscando, luego agregarlos o actualizarlos en una función auxiliar, algo como esto:
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;
Espero que funcione bien para sus necesidades!