如何正确地添加搜索查询参数，以url包含哈希在javascript

How to properly add search query param to url containing hash in javascript?

本文关键字：url 包含哈 javascript 参数 正确地 添加 搜索 查询      更新时间：2023-09-26

我想为每个链接添加一个基本url和查询参数:

function buildURL(relativePath) {
    var url = new URL('http://example.com/' + relativePath);
    url.searchParams.set('utm_source', 'app');
    return url.toString(); 
}

在大多数情况下都可以正常工作:

buildURL('search')
"http://example.com/search?utm_source=app"
buildURL('search?q=query&page=2')
"http://example.com/search?q=query&page=2&utm_source=app"

当我添加一个锚时，问题开始了:

buildURL('search#anchor')
"http://example.com/search?utm_source=app#anchor"
buildURL('search#anchor?q=query')
"http://example.com/search?utm_source=app#anchor?q=query"

这不是一个带锚的有效URL。

关于如何使用URL克服这个问题有什么想法吗?

编辑

预期的结果是在锚 之后添加查询参数。
 buildURL('search#anchor')
"http://example.com/search#anchor?utm_source=app"
buildURL('search#anchor?q=query')
"http://example.com/search#anchor?utm_source=app?q=query"


function buildURL(relativePath) {
    var url = new URL('http://example.com/' + relativePath);
    url.searchParams.set('utm_source', 'app');
    return url.toString(); 
}
console.log(buildURL("search"));
console.log(buildURL("search?q=query&page=1"));
console.log(buildURL("search#anchor"));
console.log(buildURL("search#anchor?q=query"));

不要在搜索参数中传递散列。

但是如果必须，您可以检测散列，将其从参数中分离出来，设置搜索参数并添加散列

function buildURL(relativePath) {
    var hash = "";
    if (relativePath.indexOf("#")!=-1) {
      var parts = relativePath.split("#");
      hash = encodeURIComponent(parts[1]); // optionally handle ? in the hash part
      relativePath=parts[0];
    } 
    var url = new URL('http://example.com/' + relativePath);
    url.searchParams.set('utm_source', 'app');
    if (hash) url.hash=hash;
    return url.toString(); 
}
console.log(buildURL("search"));
console.log(buildURL("search?q=query&page=1"));
console.log(buildURL("search#anchor"));
console.log(buildURL("search#anchor?q=query"));

应该可以。在查询参数

之后传递哈希值

function buildURL(path) {
  var relativePath = path.split('#')
  var url = new URL('http://example.com/' + relativePath[0]);
  url.searchParams.set('utm_source', 'app');
  url.hash = relativePath[1] ? relativePath[1] : ''
  return url.toString();
}
console.log(buildURL("search"));
console.log(buildURL("search?q=query&page=1"));
console.log(buildURL("search#anchor"));
console.log(buildURL("search#anchor?q=query"));
console.log(buildURL("searchr?q=query&q2=query2#anchor"));

相关文章：