tag - pasar variables de un script a otro javascript

Cambiar los parámetros de URL

Question

Tengo esta URL:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

lo que necesito es poder cambiar el valor del parámetro url ''rows'' a algo que especifique, digamos 10. Y si las ''rows'' no existen, necesito agregarlas al final de la url y agregar el valor que ya he especificado (10).

Answer 1

¿Una alternativa viable a la manipulación de cadenas sería configurar un form html y simplemente modificar el valor del elemento de rows ?

Entonces, con html eso es algo así como

<form id=''myForm'' target=''site.fwx''>
<input type=''hidden'' name=''position'' value=''1''/>
<input type=''hidden'' name=''archiveid'' value=''5000''/>
<input type=''hidden'' name=''columns'' value=''5''/>
<input type=''hidden'' name=''rows'' value=''20''/>
<input type=''hidden'' name=''sorting'' value=''ModifiedTimeAsc''/>
</form>

Con el siguiente JavaScript para enviar el formulario

var myForm = document.getElementById(''myForm'');
myForm.rows.value = yourNewValue;
myForm.submit();

Probablemente no sea adecuado para todas las situaciones, pero podría ser mejor que analizar la cadena URL.

Answer 2

Aquí tomé la respuesta de Adil Malik y corregí los 3 problemas que identifiqué con ella.

/**
* Adds or updates a URL parameter.
*
* @param {string} url the URL to modify
* @param {string} param the name of the parameter
* @param {string} paramVal the new value for the parameter
* @return {string} the updated URL
*/
self.setParameter = function (url, param, paramVal){
// http://.com/a/10997390/2391566
var parts = url.split(''?'');
var baseUrl = parts[0];
var oldQueryString = parts[1];
var newParameters = [];
if (oldQueryString) {
var oldParameters = oldQueryString.split(''&'');
for (var i = 0; i < oldParameters.length; i++) {
if(oldParameters[i].split(''='')[0] != param) {
newParameters.push(oldParameters[i]);
}
}
}
if (paramVal !== '''' && paramVal !== null && typeof paramVal !== ''undefined'') {
newParameters.push(param + ''='' + encodeURI(paramVal));
}
if (newParameters.length > 0) {
return baseUrl + ''?'' + newParameters.join(''&'');
} else {
return baseUrl;
}
}

Answer 3

Ben Alman tiene un buen complemento jquery querystring / url here que le permite manipular fácilmente la cadena de consulta.

Según lo solicitado -

Ir a su página de prueba here

En firebug introduce lo siguiente en la consola

jQuery.param.querystring(window.location.href, ''a=3&newValue=100'');

Te devolverá la siguiente cadena de URL modificada

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

Observe que el valor de una cadena de consulta para a ha cambiado de X a 3 y ha agregado el nuevo valor.

A continuación, puede utilizar la nueva cadena de url como lo desee, por ejemplo, utilizando document.location = newUrl o cambie un enlace de anclaje, etc.

Answer 4

Creo que quieres el complemento de consulta .

P.ej:

window.location.search = jQuery.query.set("rows", 10);

Esto funcionará independientemente del estado actual de las filas.

Answer 5

Escribí una pequeña función auxiliar que funciona con cualquier selección. Todo lo que necesita hacer es agregar la clase "redirectOnChange" a cualquier elemento de selección, y esto hará que la página vuelva a cargar con un parámetro de querystring nuevo / modificado, igual al ID y el valor de la selección, por ejemplo:

<select id="myValue" class="redirectOnChange">
<option value="222">test222</option>
<option value="333">test333</option>
</select>

El ejemplo anterior agregaría "? MyValue = 222" o "? MyValue = 333" (o utilizando "&" si existen otros parámetros) y recarga la página.

jQuery:

$(document).ready(function () {
//Redirect on Change
$(".redirectOnChange").change(function () {
var href = window.location.href.substring(0, window.location.href.indexOf(''?''));
var qs = window.location.href.substring(window.location.href.indexOf(''?'') + 1, window.location.href.length);
var newParam = $(this).attr("id") + ''='' + $(this).val();
if (qs.indexOf($(this).attr("id") + ''='') == -1) {
if (qs == '''') {
qs = ''?''
}
else {
qs = qs + ''&''
}
qs = qs + newParam;
}
else {
var start = qs.indexOf($(this).attr("id") + "=");
var end = qs.indexOf("&", start);
if (end == -1) {
end = qs.length;
}
var curParam = qs.substring(start, end);
qs = qs.replace(curParam, newParam);
}
window.location.replace(href + ''?'' + qs);
});
});

Answer 6

Estaba buscando lo mismo y encontré: https://github.com/medialize/URI.js que es bastante agradable :)

- Actualización

Encontré un paquete mejor: https://www.npmjs.org/package/qs también trata con arreglos en get params.

Answer 7

Esto es lo que hago. Usando mi función editParams (), puede agregar, eliminar o cambiar cualquier parámetro, luego usar la función incorporada en replaceState () para actualizar la URL:

window.history.replaceState(''object or string'', ''Title'', ''page.html'' + editParams(''sorting'', ModifiedTimeAsc));
// background functions below:
// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
key = encodeURI(key);
var params = getSearchParameters();
if (Object.keys(params).length === 0) {
if (value !== false)
return ''?'' + key + ''='' + encodeURI(value);
else
return '''';
}
if (value !== false)
params[key] = encodeURI(value);
else
delete params[key];
if (Object.keys(params).length === 0)
return '''';
return ''?'' + $.map(params, function (value, key) {
return key + ''='' + value;
}).join(''&'');
}
// Get object/associative array of URL parameters
function getSearchParameters () {
var prmstr = window.location.search.substr(1);
return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}
// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
var params = {},
prmarr = prmstr.split("&");
for (var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}

Answer 8

He extendido el código de Sujoy para crear una función.

/**
* http://.com/a/10997390/11236
*/
function updateURLParameter(url, param, paramVal){
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if (additionalURL) {
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++){
if(tempArray[i].split(''='')[0] != param){
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}

Llamadas de función:

var newURL = updateURLParameter(window.location.href, ''locId'', ''newLoc'');
newURL = updateURLParameter(newURL, ''resId'', ''newResId'');
window.history.replaceState('''', '''', updateURLParameter(window.location.href, "param", "value"));

Versión actualizada que también se encarga de los anclajes en la URL.

function updateURLParameter(url, param, paramVal)
{
var TheAnchor = null;
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if (additionalURL)
{
var tmpAnchor = additionalURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheAnchor)
additionalURL = TheParams;
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++)
{
if(tempArray[i].split(''='')[0] != param)
{
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}
else
{
var tmpAnchor = baseURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheParams)
baseURL = TheParams;
}
if(TheAnchor)
paramVal += "#" + TheAnchor;
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}

Answer 9

Otra variación en la respuesta de Sujoy. Acabo de cambiar los nombres de las variables y agregué un contenedor de espacios de nombres:

window.MyNamespace = window.MyNamespace || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};
(function (ns) {
ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {
var otherQueryStringParameters = "";
var urlParts = url.split("?");
var baseUrl = urlParts[0];
var queryString = urlParts[1];
var itemSeparator = "";
if (queryString) {
var queryStringParts = queryString.split("&");
for (var i = 0; i < queryStringParts.length; i++){
if(queryStringParts[i].split(''='')[0] != parameterName){
otherQueryStringParameters += itemSeparator + queryStringParts[i];
itemSeparator = "&";
}
}
}
var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;
return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
};
})(window.MyNamespace.Uri);

El uso es ahora:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");

Answer 10

Para responder a mi propia pregunta 4 años después, después de haber aprendido mucho. Especialmente que no deberías usar jQuery para todo. Creé un módulo simple que puede analizar / stringificar una cadena de consulta. Esto hace que sea fácil modificar la cadena de consulta.

Puede usar query-string siguiente manera:

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);

Answer 11

Pequeña solución rápida en js puros, no se necesitan complementos:

function replaceQueryParam(param, newval, search) {
var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
var query = search.replace(regex, "$1").replace(/&$/, '''');
return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '''');
}

Llámalo así:

 window.location = ''/mypage'' + replaceQueryParam(''rows'', 55, window.location.search)

O bien, si desea permanecer en la misma página y reemplazar múltiples params:

 var str = window.location.search
str = replaceQueryParam(''rows'', 55, str)
str = replaceQueryParam(''cols'', ''no'', str)
window.location = window.location.pathname + str

editar, gracias Luke: para eliminar el parámetro por completo, pase false o null para el valor: replaceQueryParam(''rows'', false, params) . Como 0 también es falso , especifique ''0'' .

Answer 12

Puede usar esta mi biblioteca para hacer el trabajo: https://github.com/Mikhus/jsurl

var url = new Url(''site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc'');
url.query.rows = 10;
alert( url);

Answer 13

Sé que esta es una vieja pregunta. He mejorado la función anterior para agregar o actualizar parámetros de consulta. Sigue siendo una solución pura de JS solamente.

 function addOrUpdateQueryParam(param, newval, search) {
var questionIndex = search.indexOf(''?'');
if (questionIndex < 0) {
search = search + ''?'';
search = search + param + ''='' + newval;
return search;
}
var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
var query = search.replace(regex, "$1").replace(/&$/, '''');
var indexOfEquals = query.indexOf(''='');
return (indexOfEquals >= 0 ? query + ''&'' : query + '''') + (newval ? param + ''='' + newval : '''');
}

Answer 14

Un enfoque moderno para esto es utilizar URLSearchParams basados ​​en estándares URLSearchParams . Para navegadores más antiguos, hay rellenos available

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set(''rows'', 10);

Answer 15

Yo también he escrito una biblioteca para obtener y establecer parámetros de consulta de URL en JavaScript .

Aquí hay un ejemplo de su uso.

var url = Qurl.create()
, query
, foo
;

Obtenga parámetros de consulta como un objeto, por clave, o agregue / cambie / elimine.

// returns { foo: ''bar'', baz: ''qux'' } for ?foo=bar&baz=qux
query = url.query();
// get the current value of foo
foo = url.query(''foo'');
// set ?foo=bar&baz=qux
url.query(''foo'', ''bar'');
url.query(''baz'', ''qux'');
// unset foo, leaving ?baz=qux
url.query(''foo'', false); // unsets foo

Answer 16

puedes hacerlo a través de JS normal también

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1];
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
if(tempArray[i].indexOf("rows") == -1){
newAdditionalURL += temp+tempArray[i];
temp = "&";
}
}
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;