Лучший способ динамического удаления параметров из URL на основе соответствующих идентификаторов

Question

Мне нужно динамически удалить параметры id из URL на основе идентификатора элемента div, по которому щелкают. Идентификаторы разделены заглавной буквой Z. Мне в основном нужно написать чек, который совпадает с id нажатого элемента div с id в URL. А затем удалите этот параметр, если он нажал, и перезагрузите страницу с URL-адресом, на котором удалено id.

Статически я написал несколько JQuery для его удаления, если доступен только один id.

Вот пример URL-адреса

http://example.com/cyegyufy-Z9c86uh9ozzpZ90a9emsjmdiZgjkgkjgkukZlkhlkhlklk

import * as $ from 'jquery';
$('blah blah blah'). on('click', e=> {
    removeParam(e)
    console.log('has been clicked')
})

const removeParam =(e) => {
    var pathArray = window.location.href.split('-Z');
    var ArticlePillId = e.currentTarget.id
    if (pathArray[1] === ArticlePillId) {
        pathArray.splice(1)
    }
    console.log(pathArray)
    window.location.href = pathArray[0]
}

Это перезагрузит страницу с точным URL-адресом, но он статический.

Answer 1

Вы можете изменить путь к URL на лету, основываясь на событиях клика по статьям. Помните, что при назначении / изменении чего-либо в пределах window.location страница автоматически перезагрузится.

 document.querySelectorAll("article").forEach(article => {
     article.addEventListener("click", function() {

    let url = window.location,
    path = url.pathname,

      articleID = article.id,
      articlePill = "-Z" + articleID,

      articleRE = /-Z(\w+)/g,

      articles = path.match(articleRE);
    if (!articles) articles = [];

    if (articles.includes(articlePill)) {
      articles = articles.filter(article => article != articlePill);
    } else {
      articles.push(articlePill);
    }

    url.pathname = articles.join("");

  });

});

---

Пример:

let url = new URL("http://www.example.com/cyegyufy-ZfirstArticle-ZsecondArticle");
// window.location.pathname

document.querySelectorAll("article").forEach(article => {
  article.addEventListener("click", function() {

    let path = url.pathname,

      articleID = article.id,
      articlePill = "-Z" + articleID,

      articleRE = /-Z(\w+)/g,

      articles = path.match(articleRE);
    if (!articles) articles = [];

    if (articles.includes(articlePill)) {
      articles = articles.filter(article => article != articlePill);
    } else {
      articles.push(articlePill);
    }

    url.pathname = articles.join("");

    console.log(url);

  });

});

article {
  height: 100px;
  margin: 5px;
  width: 100px;
  border: 1px solid black;
}

<article id="firstArticle">
  <h6>firstArticle</h6>
</article>
<article id="secondArticle">
  <h6>secondArticle</h6>
</article>