javascriptでハッシュを含むurlに検索クエリのparamを正しく追加する方法は？

Question

私は、各リンクにベース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を使用してこれを克服する方法についてのアイデアはありますか？

EDIT

期待される結果がクエリが後のアンカー

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

がでハッシュに渡さないでくださいparamsは追加されます検索パラメータ。あなたは、あなたがハッシュを検出することができなければならない場合

はしかし、パラメータからそれを分割し、検索のparamを設定し、これは動作するはずハッシュ

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

を追加... を渡しますクエリ後のハッシュは

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

をparamsは