JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>
        <a href="#link1" class="truelink">True Link1</a>
    </li>
    <li>
        <a href="#link2" class="truelink">True Link2</a>
    </li>
    <li>
        <a href="#link3" class="truelink">True Link3</a>
    </li>
</ol>

CSS

</style>
<base href="http://www.example.com/"/>
<style>

JavaScript

window.addEventListener('load', function links(){
    var base = document.getElementsByTagName('base')[0],
        links = document.getElementsByClassName('truelink'),
        l = links.length,
        uri = 'http://www.host.tld/path?query=test';
    
    console.log('Base:', base, ', True Links:', links);
    
    console.log('Modifying links in five seconds...');
    
    setTimeout(function go(){
        console.log('Modifying links now...');

        while (l--){
            links[l].href = links[l].href.replace(base.href, uri);
        }

        console.log('Base: ', base, 'True Links: ', links);
    }, 5000);
});