如何正确地将搜索查询参数添加到JavaScript中包含哈希的网址？

Question

I want to add a base url and query parameters to each link:

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

It works fine for most cases:

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"

The problem starts when I add an anchor:

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"

This is not a valid URL with an anchor.

Any ideas on how to overcome that using URL?

EDIT

The expected outcome is adding the query params after the anchor

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

Answer 1

Don't pass in a hash in the search params.

But if you must, you can detect the hash, split it from the parameter, set the search param and add the hash

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

Answer 2

This should work.. Pass the hash after the query params

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