我想为每个链接添加一个基本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"));