我有这个URL:

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

我需要的是能够改变'行' url参数值我指定的东西,让我们说10。如果“行”不存在,我需要将它添加到url的末尾,并添加我已经指定的值(10)。


当前回答

var url = new URL(window.location.href);
var search_params = url.searchParams;
search_params.set("param", value);
url.search = search_params.toString();
var new_url = url.pathname + url.search;
window.history.replaceState({}, '', new_url);

其他回答

我认为你需要查询插件。

例如:

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

不管行当前的状态如何,这都可以工作。

下面是一个使用query-string库的简单解决方案。

const qs = require('query-string')
function addQuery(key, value) {
  const q = qs.parse(location.search)
  const url = qs.stringifyUrl(
    {
      url: location.pathname,
      query: {
      ...q,
      [key]: value,
      },
    },
    { skipEmptyString: true }
  );
  window.location.href = url
  // if you are using Turbolinks
  // add this: Turbolinks.visit(url)
}
// Usage
addQuery('page', 2)

如果你使用react而不使用react-router

export function useAddQuery() {
  const location = window.location;
  const addQuery = useCallback(
    (key, value) => {
      const q = qs.parse(location.search);
      const url = qs.stringifyUrl(
        {
          url: location.pathname,
          query: {
            ...q,
            [key]: value,
          },
        },
        { skipEmptyString: true }
      );
      window.location.href = url
    },
    [location]
  );

  return { addQuery };
}
// Usage
const { addQuery } = useAddQuery()
addQuery('page', 2)

如果你使用react和react-router

export function useAddQuery() {
  const location = useLocation();
  const history = useHistory();

  const addQuery = useCallback(
    (key, value) => {
      let pathname = location.pathname;
      let searchParams = new URLSearchParams(location.search);
      searchParams.set(key, value);
      history.push({
        pathname: pathname,
        search: searchParams.toString()
      });
    },
    [location, history]
  );

  return { addQuery };
}

// Usage
const { addQuery } = useAddQuery()
addQuery('page', 2)

PS: qs是从query-string模块导入的。

Ben Alman有一个很好的jquery querystring/url插件,可以让你很容易地操纵querystring。

如要求-

点击这里进入他的测试页面

在firebug中,在控制台中输入以下内容

jQuery.param.querystring (window.location。报道中,x = 3&newValue = 100);

它将返回以下修改后的url字符串

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

注意,a的查询字符串值已从X更改为3,并添加了新值。

然后你可以使用新的url字符串,但你希望 使用文档。location = newUrl或改变一个锚链接等

let url= new url ("https://example.com/site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc") url.searchParams。设置(“行”,10) console.log (url.toString ())

快速的纯js小解决方案,不需要插件:

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 : '');
}

这样叫它:

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

或者,如果你想保持在同一页上并替换多个参数:

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

Luke:要完全删除参数,为值传递false或null: replaceQueryParam('rows', false, params)。因为0也是假的,所以指定'0'。