JSFiddle - React, Tailwind, and code Playground

JavaScript

//grab the one from the 3 elements separated with pipes, remove that one and re arrange the rest with pipes again.
var s = "abc%20def|red|blue";
var itemToRemove = escape("abc def"); //escape to match the value in 's'.

var items = s.split('|');
var itemToRemoveIndex = $.inArray(itemToRemove, items);
if (itemToRemoveIndex != -1) {
    items.splice(itemToRemoveIndex, 1);
    s = items.join('|');
} // now 's' will have blue|red - Update this in the url is where I am having the issues with the values like:9%25%20|10 where I cant remove this from url.



//this function takes in the url, the key to be updated with the new set of pipe values.(for ex: blue|red).
function paramReplace(url, key, value) {
    var parser = document.createElement('a');
    parser.href = url;

    var re = new RegExp('^' + key + '=', 'i');
    var search = parser.search.substring(1).split('&');

    for (var i = 0; i < search.length; i++) {
        if (re.test(search[i])) {
            search[i] = key + '=' + escape(value);
            break;
        }
    }

    parser.search = search.join('&');
    return parser.href;
}

paramReplace(testurl, aspectTitle, s);