如何使用javascript只更改url的最后一个参数，而不是附加到它

Question

我有一个下拉列表，其中选择了我想添加的值作为最后一个参数。

示例：

页面：site/nl/projecten

我选择具有值的选项："Makelaardij">

然后url需要是site/nl/projecten/Makelaardij

这与以下代码一起工作：

const projectFilter = document.querySelector('#projectFilter');
projectFilter.addEventListener('change', (event) => {
location.href = 'projecten/' + event.target.value;
});

但在选择新值时，这会不断添加projecten。示例：

网站.nl/nl/projecten/projecten/Makelaardij

所以我之前试着添加了一个斜杠，如下所示：

location.href = '/projecten/' + event.target.value;

但这删除了url的语言部分，我得到了这个：

网站.nl/projecten/Makelaardij

每次选择新值时，我能做些什么来只更改最后一部分？

当前代码：

const projectFilter = document.querySelector('#projectFilter');
projectFilter.addEventListener('change', (event) => {
let baseUrl = location.href.split('/projecten/')[0];
location.href = baseUrl + '/projecten/' + event.target.value;
});

Answer 1

您可以首先检索/projecten/之前的内容，然后将其附加到：

let baseUrl = location.href.split(//projecten/?/)[0];
location.href = baseUrl + '/projecten/' + event.target.value;

如果url中没有/projecten/，它将添加它，例如，如果url是site/nl，它将变为site/nl/projecten/Makelaardij或选择中的任何值

此外，如果url错误：website.nl/nl/projecten/projecten/Makelaardij，它会将其修复为website.nl/nl/projecten/Makelaardij

Answer 2

尝试拆分->替换->加入

var x = location.href.split("/")
x[x.length - 1] = event.target.value
location.href = x.join("/")

Answer 3

你也可以这样做，

位置。原点

返回一个字符串，该字符串包含特定位置原点的规范形式。

例如https://website.nl

现在添加路径名：/nl/projecten/

结果：https://website.nl/nl/projecten/

const projectFilter = document.querySelector('#projectFilter');
projectFilter.addEventListener('change', (event) => {
location.href = location.origin + "/nl/projecten/" + event.target.value;
});

签出有关位置的mdn文档。https://developer.mozilla.org/en-US/docs/Web/API/Location