web-dev-qa-db-ja.com

JavaScript / jQueryを使用してURLのクエリパラメータを追加または置換する方法

私は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
javascriptjqueryregexurlparameters
8
user7055375

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
4
grizzthedj

優れたソリューションは、以下のすべてを処理する必要があります。

  1. 既にorder_byクエリパラメータがあり、オプションで等号の前に空白を含むURL。これは、order_byがクエリ文字列の先頭、中間、または末尾にある場合にさらに分けることができます。
  2. order_byクエリパラメータがまだないが、クエリ文字列を区切るための疑問符がすでにあるURL。
  3. order_byクエリパラメータがなく、クエリ文字列を区切るための疑問符がまだないURL。

以下は、上記のケースを処理します。

  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.stackoverflow.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);
}
4
Steve Chambers
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");

少し長いですが、意図したとおりに機能すると思います。

3
AVAVT

URLSearchParams https://developer.mozilla.org/ru/docs/Web/API/URLSearchParams?param11=val を使用してクエリ文字列からパラメータを削除できます

IEおよびSafariではまだサポートされていませんが、polyfill https://github.com/jerrybendy/url-search-params-polyfill を追加することで使用できます。 =

また、URIのクエリ部分にアクセスまたは変更するには、window.locationの「search」プロパティを使用する必要があります。

作業コードの例：

  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);
2
Artem Bozhko

このようなもの？

let 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;
2
Georgiy Dubrov

正規表現を調整して、探している値のみを取得してから、次のようなヘルパー関数でそれらを追加または更新することができます。

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;

それがあなたのニーズにうまく機能することを願っています！

1
gtrenco

この小さな機能が役立ちます。

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

正規表現パターンを使用するには、次のパターンを使用します。

var oldUrl = "http://stackoverflow.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 = matches[1]+data_val+matches[2]+matches[3] ;
}
conole.log(newUrl);

order_byが存在しない場合、matchesはnullであり、order_by=..は?または&の後に配置する必要があります（他のパラメーターが存在する場合、新しいパラメーター&が必要です）。

order_byが存在する場合、matchesには3つのアイテムがあります ここを参照

1
MohaMad

これを試して：

パラメータを読み取る場合：

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
Maciej Kozieja

AVAVTの回答に基づいて私はそれを改善して任意のキーを取得し、欠落していた「？」も修正しましたクエリ文字列がなかった場合

function addOrReplace(key, value) {
  var stringToAdd = key+"=" + value;
  if (window.location.search == "")
    return window.location.href + '?'+stringToAdd;

  if (window.location.search.indexOf(key+'=') == -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(key+'=') > -1) {
      searchParams[i] = key+"=" + value;
      break;
    }
  }
  return window.location.href.split("?")[0] + "?" + searchParams.join("&");
}

使用量：

window.location.href = addOrReplace('order_by', 'date_created');

ページをリロードしたくない場合は、pushState Apiを使用できます

if (history.pushState) {
    var newurl =  addOrReplace('order_by', 'date_created');
    window.history.pushState({path:newurl},'',newurl);
}
0
john Smith