una - validacion de formularios con javascript ejemplos
¿Cómo puedo agregar o actualizar un parámetro de cadena de consulta? (23)
Con javascript, ¿cómo puedo agregar un parámetro de cadena de consulta a la URL si no está presente o si está presente, actualizar el valor actual? Estoy usando jquery para el desarrollo del lado de mi cliente.
Aquí está mi biblioteca para hacer eso: https://github.com/Mikhus/jsurl
var u = new Url;
u.query.param=''value''; // adds or replaces the param
alert(u)
Aquí hay un método alternativo que usa las propiedades integradas del elemento HTML de anclaje:
- Maneja parámetros multivaluados.
- No hay riesgo de modificar el # fragmento, o cualquier otra cosa que no sea la propia cadena de consulta.
- ¿Puede ser un poco más fácil de leer? Pero es más largo.
var a = document.createElement(''a''),
getHrefWithUpdatedQueryString = function(param, value) {
return updatedQueryString(window.location.href, param, value);
},
updatedQueryString = function(url, param, value) {
/*
A function which modifies the query string
by setting one parameter to a single value.
Any other instances of parameter will be removed/replaced.
*/
var fragment = encodeURIComponent(param) +
''='' + encodeURIComponent(value);
a.href = url;
if (a.search.length === 0) {
a.search = ''?'' + fragment;
} else {
var didReplace = false,
// Remove leading ''?''
parts = a.search.substring(1)
// Break into pieces
.split(''&''),
reassemble = [],
len = parts.length;
for (var i = 0; i < len; i++) {
var pieces = parts[i].split(''='');
if (pieces[0] === param) {
if (!didReplace) {
reassemble.push(''&'' + fragment);
didReplace = true;
}
} else {
reassemble.push(parts[i]);
}
}
if (!didReplace) {
reassemble.push(''&'' + fragment);
}
a.search = reassemble.join(''&'');
}
return a.href;
};
Aquí hay una versión más corta que cuida
- consulta con o sin un parámetro dado
- consulta con multiples valores de parametros
- consulta que contiene hash
Código:
var setQueryParameter = function(uri, key, value) {
var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
if (uri.match(re))
return uri.replace(re, ''$1$2'' + value);
// need to add parameter to URI
var paramString = (uri.indexOf(''?'') < 0 ? "?" : "&") + key + "=" + value;
var hashIndex = uri.indexOf(''#'');
if (hashIndex < 0)
return uri + paramString;
else
return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}
La descripción de expresiones regulares se puede encontrar here .
NOTA : Esta solución se basa en la respuesta de @amateur, pero con muchas mejoras.
Basándome en la respuesta que dio @ellemayo, se me ocurrió la siguiente solución que permite desactivar la etiqueta hash si lo desea:
function updateQueryString(key, value, options) {
if (!options) options = {};
var url = options.url || location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;
hash = url.split(''#'');
url = hash[0];
if (re.test(url)) {
if (typeof value !== ''undefined'' && value !== null) {
url = url.replace(re, ''$1'' + key + "=" + value + ''$2$3'');
} else {
url = url.replace(re, ''$1$3'').replace(/(&|/?)$/, '''');
}
} else if (typeof value !== ''undefined'' && value !== null) {
var separator = url.indexOf(''?'') !== -1 ? ''&'' : ''?'';
url = url + separator + key + ''='' + value;
}
if ((typeof options.hash === ''undefined'' || options.hash) &&
typeof hash[1] !== ''undefined'' && hash[1] !== null)
url += ''#'' + hash[1];
return url;
}
Llámalo así:
updateQueryString(''foo'', ''bar'', {
url: ''http://my.example.com#hash'',
hash: false
});
Resultados en:
http://my.example.com?foo=bar
Basado en la respuesta de @ amateur (y ahora incorporando la corrección del comentario @j_walker_dev), pero teniendo en cuenta el comentario sobre las etiquetas hash en la url, uso lo siguiente:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (uri.match(re)) {
return uri.replace(re, ''$1'' + key + "=" + value + ''$2'');
} else {
var hash = '''';
if( uri.indexOf(''#'') !== -1 ){
hash = uri.replace(/.*#/, ''#'');
uri = uri.replace(/#.*/, '''');
}
var separator = uri.indexOf(''?'') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
Editado para corregir [?|&] En expresiones regulares que, por supuesto, debe ser [?&] Como se señala en los comentarios
Edición: versión alternativa para admitir la eliminación de parámetros de URL también. He utilizado el value === undefined como la forma de indicar la eliminación. Podría usar el value === false o incluso un parámetro de entrada separado como se desee.
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if( value === undefined ) {
if (uri.match(re)) {
return uri.replace(re, ''$1$2'');
} else {
return uri;
}
} else {
if (uri.match(re)) {
return uri.replace(re, ''$1'' + key + "=" + value + ''$2'');
} else {
var hash = '''';
if( uri.indexOf(''#'') !== -1 ){
hash = uri.replace(/.*#/, ''#'');
uri = uri.replace(/#.*/, '''');
}
var separator = uri.indexOf(''?'') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
}
Véalo en acción en https://jsfiddle.net/bp3tmuxh/1/
Código de script de Java para encontrar una cadena de consulta específica y reemplazar su valor *
(''input.letter'').click(function () {
//0- prepare values
var qsTargeted = ''letter='' + this.value; //"letter=A";
var windowUrl = '''';
var qskey = qsTargeted.split(''='')[0];
var qsvalue = qsTargeted.split(''='')[1];
//1- get row url
var originalURL = window.location.href;
//2- get query string part, and url
if (originalURL.split(''?'').length > 1) //qs is exists
{
windowUrl = originalURL.split(''?'')[0];
var qs = originalURL.split(''?'')[1];
//3- get list of query strings
var qsArray = qs.split(''&'');
var flag = false;
//4- try to find query string key
for (var i = 0; i < qsArray.length; i++) {
if (qsArray[i].split(''='').length > 0) {
if (qskey == qsArray[i].split(''='')[0]) {
//exists key
qsArray[i] = qskey + ''='' + qsvalue;
flag = true;
break;
}
}
}
if (!flag)// //5- if exists modify,else add
{
qsArray.push(qsTargeted);
}
var finalQs = qsArray.join(''&'');
//6- prepare final url
window.location = windowUrl + ''?'' + finalQs;
}
else {
//6- prepare final url
//add query string
window.location = originalURL + ''?'' + qsTargeted;
}
})
});
Escribí la siguiente función que cumple lo que quiero lograr:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf(''?'') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, ''$1'' + key + "=" + value + ''$2'');
}
else {
return uri + separator + key + "=" + value;
}
}
Esta es mi preferencia, y cubre los casos que se me ocurren. ¿Alguien puede pensar en una manera de reducirlo a un solo reemplazo?
function setParam(uri, key, val) {
return uri
.replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
.replace(/^([^?&]+)&/, "$1?");
}
Este es mi enfoque: la función location.params() (que se muestra a continuación) se puede utilizar como captadora o definidora. Ejemplos:
Dado que la URL es http://example.com/?foo=bar&baz#some-hash ,
-
location.params()devolverá un objeto con todos los parámetros de consulta:{foo: ''bar'', baz: true}. -
location.params(''foo'')devolverá''bar''. -
location.params({foo: undefined, hello: ''world'', test: true})cambiará la URL ahttp://example.com/?baz&hello=world&test#some-hash.
Aquí está la función params() , que opcionalmente se puede asignar al objeto window.location .
location.params = function(params) {
var obj = {}, i, parts, len, key, value;
if (typeof params === ''string'') {
value = location.search.match(new RegExp(''[?&]'' + params + ''=?([^&]*)[&#$]?''));
return value ? value[1] : undefined;
}
var _params = location.search.substr(1).split(''&'');
for (i = 0, len = _params.length; i < len; i++) {
parts = _params[i].split(''='');
if (! parts[0]) {continue;}
obj[parts[0]] = parts[1] || true;
}
if (typeof params !== ''object'') {return obj;}
for (key in params) {
value = params[key];
if (typeof value === ''undefined'') {
delete obj[key];
} else {
obj[key] = value;
}
}
parts = [];
for (key in obj) {
parts.push(key + (obj[key] === true ? '''' : ''='' + obj[key]));
}
location.search = parts.join(''&'');
};
Esto debería servir al propósito:
function updateQueryString(url, key, value) {
var arr = url.split("#");
var url = arr[0];
var fragmentId = arr[1];
var updatedQS = "";
if (url.indexOf("?") == -1) {
updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
}
else {
updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value);
}
url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
if (typeof fragmentId !== ''undefined'') {
url = url + "#" + fragmentId;
}
return url;
}
function addOrModifyQS(queryStrings, key, value) {
var oldQueryStrings = queryStrings.split("&");
var newQueryStrings = new Array();
var isNewKey = true;
for (var i in oldQueryStrings) {
var currItem = oldQueryStrings[i];
var searchKey = key + "=";
if (currItem.indexOf(searchKey) != -1) {
currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
isNewKey = false;
}
newQueryStrings.push(currItem);
}
if (isNewKey) {
newQueryStrings.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
}
return newQueryStrings.join("&");
}
Hay muchas respuestas incómodas e innecesariamente complicadas en esta página. El de mayor audiencia, @ amateur''s, es bastante bueno, aunque tiene un poco de pelusa innecesaria en el RegExp. Aquí hay una solución ligeramente más óptima con RegExp más limpia y una llamada de replace más limpia:
function updateQueryStringParamsNoHash(uri, key, value) {
var re = new RegExp("([?&])" + key + "=[^&]*", "i");
return re.test(uri)
? uri.replace(re, ''$1'' + key + "=" + value)
: uri + separator + key + "=" + value
;
}
Como un bono adicional, si uri no es una cadena, no obtendrás errores al tratar de llamar a la match o replace en algo que puede no implementar esos métodos.
Y si desea manejar el caso de un hash (y ya ha realizado una comprobación del HTML con el formato correcto), puede aprovechar la función existente en lugar de escribir una nueva función que contenga la misma lógica:
function updateQueryStringParams(url, key, value) {
var splitURL = url.split(''#'');
var hash = splitURL[1];
var uri = updateQueryStringParamsNoHash(splitURL[0]);
return hash == null ? uri : uri + ''#'' + hash;
}
O puede hacer algunos cambios leves en la excelente respuesta de @ Adam:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
if (re.test(uri)) {
return uri.replace(re, ''$1'' + key + "=" + value);
} else {
var matchData = uri.match(/^([^#]*)(#.*)?$/);
var separator = //?/.test(uri) ? "&" : "?";
return matchData[0] + separator + key + "=" + value + (matchData[1] || '''');
}
}
He expandido la solución y la combiné con otra que encontré para reemplazar / actualizar / eliminar los parámetros de la cadena de consulta según la entrada de los usuarios y teniendo en cuenta el anclaje de las urls.
Si no proporciona un valor, se eliminará el parámetro, al proporcionar uno se agregará / actualizará el parámetro. Si no se proporciona una URL, se tomará de window.location
function UpdateQueryString(key, value, url) {
if (!url) url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== ''undefined'' && value !== null)
return url.replace(re, ''$1'' + key + "=" + value + ''$2$3'');
else {
hash = url.split(''#'');
url = hash[0].replace(re, ''$1$3'').replace(/(&|/?)$/, '''');
if (typeof hash[1] !== ''undefined'' && hash[1] !== null)
url += ''#'' + hash[1];
return url;
}
}
else {
if (typeof value !== ''undefined'' && value !== null) {
var separator = url.indexOf(''?'') !== -1 ? ''&'' : ''?'';
hash = url.split(''#'');
url = hash[0] + separator + key + ''='' + value;
if (typeof hash[1] !== ''undefined'' && hash[1] !== null)
url += ''#'' + hash[1];
return url;
}
else
return url;
}
}
Actualizar
Hubo un error al eliminar el primer parámetro en la cadena de consulta, he reelaborado la expresión regular y la prueba para incluir una solución.
Segunda actualización
Según lo sugerido por @ JarónBarends - Ajustar el valor del valor para verificar contra indefinido y nulo para permitir la configuración de valores 0
Tercera actualización
Hubo un error en el que al eliminar una variable de cadena de consulta directamente antes de un hashtag se perdería el símbolo de hashtag que se ha corregido.
Cuarta Actualización
Gracias a @rooby por señalar una optimización de expresiones regulares en el primer objeto RegExp. Establezca la expresión regular inicial en ([? &]) Debido a un problema con el uso de (/? | &) Encontrado por @YonatanKarni
Quinta actualización
Eliminando declarar hash var en la sentencia if / else
La utilidad URLSearchParams puede ser útil para esto en combinación con window.location.search . Por ejemplo:
if (''URLSearchParams'' in window) {
var searchParams = new URLSearchParams(window.location.search);
searchParams.set("foo", "bar");
window.location.search = searchParams.toString();
}
Ahora foo se ha establecido en bar independientemente de si ya existía o no.
Sin embargo, la asignación anterior a window.location.search causará una carga de página, por lo que si no es deseable, use la API de historial de la siguiente manera:
if (''URLSearchParams'' in window) {
var searchParams = new URLSearchParams(window.location.search)
searchParams.set("foo", "bar");
var newRelativePathQuery = window.location.pathname + ''?'' + searchParams.toString();
history.pushState(null, '''', newRelativePathQuery);
}
Ahora no necesita escribir su propia expresión regular o lógica para manejar la posible existencia de cadenas de consulta.
Sin embargo, el soporte del navegador es deficiente ya que actualmente es experimental y solo se usa en versiones recientes de Chrome, Firefox, Safari, iOS Safari, Android Browser, Android Chrome y Opera. Use con un polyfill si decide usarlo.
Actualización: el soporte del navegador ha mejorado desde mi respuesta original.
Me doy cuenta de que esta pregunta es antigua y ha sido contestada a muerte, pero aquí está mi intento. Estoy intentando reinventar la rueda aquí porque estaba usando la respuesta actualmente aceptada y el mal manejo de los fragmentos de URL recientemente me mordió en un proyecto.
La función está abajo. Es bastante largo, pero fue hecho para ser lo más resistente posible. Me encantaría sugerencias para acortarlo / mejorarlo. Preparé un pequeño conjunto de pruebas jsFiddle para ello (u otras funciones similares). Si una función puede pasar cada una de las pruebas allí, yo digo que probablemente sea bueno ir.
Actualización: encontré una función genial para usar el DOM para analizar las URL , así que incorporé esa técnica aquí. Hace la función más corta y más confiable. Apoyos al autor de esa función.
/**
* Add or update a query string parameter. If no URI is given, we use the current
* window.location.href value for the URI.
*
* Based on the DOM URL parser described here:
* http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
*
* @param (string) uri Optional: The URI to add or update a parameter in
* @param (string) key The key to add or update
* @param (string) value The new value to set for key
*
* Tested on Chrome 34, Firefox 29, IE 7 and 11
*/
function update_query_string( uri, key, value ) {
// Use window URL if no query string is provided
if ( ! uri ) { uri = window.location.href; }
// Create a dummy element to parse the URI with
var a = document.createElement( ''a'' ),
// match the key, optional square brackets, an equals sign or end of string, the optional value
reg_ex = new RegExp( key + ''((?://[[^//]]*//])?)(=|$)(.*)'' ),
// Setup some additional variables
qs,
qs_len,
key_found = false;
// Use the JS API to parse the URI
a.href = uri;
// If the URI doesn''t have a query string, add it and return
if ( ! a.search ) {
a.search = ''?'' + key + ''='' + value;
return a.href;
}
// Split the query string by ampersands
qs = a.search.replace( /^/?/, '''' ).split( /&(?:amp;)?/ );
qs_len = qs.length;
// Loop through each query string part
while ( qs_len > 0 ) {
qs_len--;
// Remove empty elements to prevent double ampersands
if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }
// Check if the current part matches our key
if ( reg_ex.test( qs[qs_len] ) ) {
// Replace the current value
qs[qs_len] = qs[qs_len].replace( reg_ex, key + ''$1'' ) + ''='' + value;
key_found = true;
}
}
// If we haven''t replaced any occurrences above, add the new parameter and value
if ( ! key_found ) { qs.push( key + ''='' + value ); }
// Set the new query string
a.search = ''?'' + qs.join( ''&'' );
return a.href;
}
Mi toma desde aquí (compatible con "use strict"; en realidad no usa jQuery):
function decodeURIParams(query) {
if (query == null)
query = window.location.search;
if (query[0] == ''?'')
query = query.substring(1);
var params = query.split(''&'');
var result = {};
for (var i = 0; i < params.length; i++) {
var param = params[i];
var pos = param.indexOf(''='');
if (pos >= 0) {
var key = decodeURIComponent(param.substring(0, pos));
var val = decodeURIComponent(param.substring(pos + 1));
result[key] = val;
} else {
var key = decodeURIComponent(param);
result[key] = true;
}
}
return result;
}
function encodeURIParams(params, addQuestionMark) {
var pairs = [];
for (var key in params) if (params.hasOwnProperty(key)) {
var value = params[key];
if (value != null) /* matches null and undefined */ {
pairs.push(encodeURIComponent(key) + ''='' + encodeURIComponent(value))
}
}
if (pairs.length == 0)
return '''';
return (addQuestionMark ? ''?'' : '''') + pairs.join(''&'');
}
//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
// for (var key in source) if (source.hasOwnProperty(key)) {
// destination[key] = source[key];
// }
// return destination;
// }
function navigateWithURIParams(newParams) {
window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}
Ejemplo de uso:
// add/update parameters
navigateWithURIParams({ foo: ''bar'', boz: 42 });
// remove parameter
navigateWithURIParams({ foo: null });
// submit the given form by adding/replacing URI parameters (with jQuery)
$(''.filter-form'').submit(function(e) {
e.preventDefault();
navigateWithURIParams(decodeURIParams($(this).serialize()));
});
Para dar un ejemplo de código para modificar window.location.search como lo sugieren Gal y tradyblix:
var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
// more than just the question mark, so append with ampersand
qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;
Sé que esto es bastante viejo pero quiero disparar mi versión de trabajo aquí.
function addOrUpdateUrlParam(uri, paramKey, paramVal) {
var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i");
if (re.test(uri)) {
uri = uri.replace(re, ''$1'' + paramKey + "=" + paramVal);
} else {
var separator = //?/.test(uri) ? "&" : "?";
uri = uri + separator + paramKey + "=" + paramVal;
}
return uri;
}
jQuery(document).ready(function($) {
$(''#paramKey,#paramValue'').on(''change'', function() {
if ($(''#paramKey'').val() != "" && $(''#paramValue'').val() != "") {
$(''#uri'').val(addOrUpdateUrlParam($(''#uri'').val(), $(''#paramKey'').val(), $(''#paramValue'').val()));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php">
<label style="display:block;">paramKey
<input type="text" id="paramKey">
</label>
<label style="display:block;">paramValue
<input type="text" id="paramValue">
</label>
NOTA Esta es una versión modificada de @elreimundo
Sí, tuve un problema en el que mi cadena de consulta se desbordaría y duplicaría, pero esto se debió a mi propia lentitud. Así que jugué un poco y trabajé un poco js jquery (en realidad chisporrotea) y C # magick.
Entonces me di cuenta de que después de que el servidor haya terminado con los valores pasados, los valores ya no importan, no hay reutilización, si el cliente quería hacer lo mismo, evidentemente, siempre será una nueva solicitud, incluso si es el mismos parámetros que se están pasando. Y eso es todo en el lado del cliente, por lo que algunos caché / cookies, etc.
JS:
$(document).ready(function () {
$(''#ser'').click(function () {
SerializeIT();
});
function SerializeIT() {
var baseUrl = "";
baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
var myQueryString = "";
funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
myQueryString = $(''#fr2'').serialize();
window.location.replace(baseUrl + "?" + myQueryString);
}
function getBaseUrlFromBrowserUrl(szurl) {
return szurl.split("?")[0];
}
function funkyMethodChangingStuff(){
//do stuff to whatever is in fr2
}
});
HTML:
<div id="fr2">
<input type="text" name="qURL" value="http://somewhere.com" />
<input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>
DO#:
using System.Web;
using System.Text;
using System.Collections.Specialized;
public partial class SomeCoolWebApp : System.Web.UI.Page
{
string weburl = string.Empty;
string partName = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string loadurl = HttpContext.Current.Request.RawUrl;
string querySZ = null;
int isQuery = loadurl.IndexOf(''?'');
if (isQuery == -1) {
//If There Was no Query
}
else if (isQuery >= 1) {
querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
string[] getSingleQuery = querySZ.Split(''?'');
querySZ = getSingleQuery[0];
NameValueCollection qs = null;
qs = HttpUtility.ParseQueryString(querySZ);
weburl = qs["qURL"];
partName = qs["qSPart"];
//call some great method thisPageRocks(weburl,partName); or whatever.
}
}
}
Bueno, las críticas son bienvenidas (esta fue una combinación nocturna, así que siéntase libre de observar los ajustes). Si esto ayudó en algo, levántalo, Happy Coding.
No hay duplicados, cada solicitud es tan única como la modificaste, y debido a la forma en que está estructurada, es fácil agregar más consultas dinámicamente desde el dom.
Si desea configurar múltiples parámetros a la vez:
function updateQueryStringParameters(uri, params) {
for(key in params){
var value = params[key],
re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
separator = uri.indexOf(''?'') !== -1 ? "&" : "?";
if (uri.match(re)) {
uri = uri.replace(re, ''$1'' + key + "=" + value + ''$2'');
}
else {
uri = uri + separator + key + "=" + value;
}
}
return uri;
}
misma función que la de @ amateur
Si jslint le da un error, agregue esto después del bucle for
if(params.hasOwnProperty(key))
Si no está configurado o desea actualizar con un nuevo valor, puede utilizar:
window.location.search = ''param=value''; // or param=new_value
Esto está en Javascript simple, por cierto.
EDITAR
Puede intentar usar el complemento de query-object jquery
window.location.search = jQuery.query.set ("param", 5);
Un enfoque diferente sin utilizar expresiones regulares . Admite anclajes ''hash'' al final de la URL, así como múltiples caracteres de interrogación (?). Debe ser un poco más rápido que el enfoque de expresión regular.
function setUrlParameter(url, key, value) {
var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '''';
var query = (url = parts[0]).split("?", 2);
if (query.length === 1)
return url + "?" + key + "=" + value + anchor;
for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;
return url + "&" + key + "=" + value + anchor
}
Utilice esta función para agregar, eliminar y modificar el parámetro de cadena de consulta desde la URL basada en jquery
/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
var value = {};
var query = String(url).split(''?'');
if (query[1]) {
var part = query[1].split(''&'');
for (i = 0; i < part.length; i++) {
var data = part[i].split(''='');
if (data[0] && data[1]) {
value[data[0]] = data[1];
}
}
}
value = $.extend(value, param);
// Remove empty value
for (i in value){
if(!value[i]){
delete value[i];
}
}
// Return url with modified parameter
if(value){
return query[0] + ''?'' + $.param(value);
} else {
return query[0];
}
}
Agregar nuevo y modificar el parámetro existente a url
var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45
Eliminar existente
var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50
window.location.search es de lectura / escritura.
Sin embargo, la modificación de la cadena de consulta redirigirá la página en la que se encuentra y provocará una actualización del servidor.
Si lo que está tratando de hacer es mantener el estado del lado del cliente (y potencialmente hacerlo compatible con marcadores), querrá modificar el hash de la URL en lugar de la cadena de consulta, lo que lo mantiene en la misma página (window.location). hash es de lectura / escritura). Así es como sitios web como twitter.com hacen esto.
También querrá que el botón de retroceso funcione, tendrá que vincular eventos de javascript al evento de cambio de hash, un buen complemento para eso es http://benalman.com/projects/jquery-hashchange-plugin/