remove ejemplo data attribute javascript jquery regex url parameters

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&param2=val2&param3=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:

  1. 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 donde order_by aparece al inicio, en el medio o al final de la cadena de consulta.
  2. 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.
  3. 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.

Paquete de NPM
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


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!