JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body"></div>

CSS

.path {
    color: green;
}
.qm {
    color: magenta;
}
.amp {
    color: gray;
}
.eq {
    color: cyan;
}
.name {
    color: blue;
}
.value {
    color: orange;
}
.error {
    color: red;
}

JavaScript

function parseQuery(query){
    parsed = query.split('?');
    if (parsed.length > 1) {
        parsed[1] = parsed[1].split('&');
        for(i in parsed[1]) {
            parsed[1][i] = parsed[1][i].split('=');
        }
    }
    console.log(parsed);
    retStr = '<span class="path">' + parsed[0] + '</span>';
    if (parsed.length > 1) {
        retStr += '<span class="qm">?</span>';
        first = true;
        for(i in parsed[1]) {
            if (first) {
                first = false;
            } else {
                retStr += '<span class="amp">&</span>';
            }
            retStr += '<span class="name">' + parsed[1][i][0] + '</span>';
            if (parsed[1][i].length > 1) {
                retStr += '<span class="eq">=</span>' +
                '<span class="value">' + parsed[1][i][1] + '</span>';
            }
            if (parsed[1][i].length > 2) {
                for (var j = 2; j < parsed[1][i].length; j++) {
                      retStr += '<span class="eq">=</span>';
                      retStr += '<span class="error">' + parsed[1][i][j] + '</span>';
                }
            }
        }
    }
    if (parsed.length > 2) {
        for (var i = 2; i < parsed.length; i++) {
              retStr += '<span class="qm">?</span>';
              retStr += '<span class="error">' + parsed[i] + '</span>';
        }
    }
    console.log(retStr);
    return retStr;
}

var b = document.getElementById('body');
b.innerHTML += parseQuery("/parh/path?arg1=val1&novalarg&arg2=val2");
b.innerHTML += '<br/>';
b.innerHTML += parseQuery("/no/args");
b.innerHTML += '<br/>';
b.innerHTML += parseQuery("missformed?url?here");
b.innerHTML += '<br/>';
b.innerHTML += parseQuery("/path/?this=is=also=wrong");
b.innerHTML += '<br/>';
b.innerHTML +=...