javascript - это - диафан документация




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

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

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

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

?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

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

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;

Вы можете удалить параметр из строки запроса, используя 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);


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

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

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


Хорошее решение должно отвечать всем следующим требованиям:

  1. URL, у которого уже есть параметр order_by query, необязательно с пробелом перед знаком равенства. Это можно разделить на случаи, когда 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..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);
}  


Эта небольшая функция могла бы помочь.

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("","",""));


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

Страница загрузки плагина
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.

Пакет 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




parameters