如何使用 javascript 僅更改 url 的最后一個參數而不是附加到它

Question

我有一個下拉列表，其中選擇了我想添加為最后一個參數的值。

例子：

在頁面上：site/nl/projecten

我 select 選項的值：'Makelaardij'

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

這適用於以下代碼：

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

但這在選擇新值時會不斷增加projecten 。 例子：

website.nl/nl/projecten/projecten/Makelaardij

所以我嘗試在這樣之前添加一個斜杠：

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

但這刪除了 url 的語言部分，我得到了這個：

website.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/之前的內容，然后再檢索 append 到它：

let baseUrl = location.href.split(/\/projecten\/?/)[0];

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

如果 url 中沒有/projecten/ ，它將添加它，例如，如果 url 是site/nl ，它將變為site/nl/projecten/Makelaardij或 Z99CF838282F040671 中的任何值

此外，如果 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