Change part of url link when user press text with pure Javascript

Question

Is there any easy way to do this (with pure javascript)?

If i have

<span>text1.de</span>
<span>text2.com</span>
<span>text3.pl</span>
.
.
.

<a href="https://xxxxx.com/example/">https://xxxxx.com/example/</a>
<a href="https://xxxxx.com/example2/">https://xxxxx.com/example2/</a>
<a href="https://xxxxx.com/example3/">https://xxxxx.com/example3/</a>
<a href="https://xxxxx.com/example4/">https://xxxxx.com/example4/</a>
.
.
.

I want that when an user press text1.de or text2.com... all xxxxx.com links are replaced by that text. For example if the user presses text1.de all links are

<a href="https://text1.de/example/">https://text1.de/example/</a>
<a href="https://text1.de/example2/">https://text1.de/example2/</a>
<a href="https://text1.de/example3/">https://text1.de/example3/</a>
<a href="https://text1.de/example4/">https://text1.de/example4/</a>
.
.
.
    

if presses text3.com all link are

<a href="https://text3.com/example/">https://text3.com/example/</a>
<a href="https://text3.com/example2/">https://text3.com/example2/</a>
<a href="https://text3.com/example3/">https://text3.com/example3/</a>
<a href="https://text3.com/example4/">https://text3.com/example4/</a>
.
.
.   

Answer 1

I'm not aware of all the conditions in your case, but at least this does the job. It replaces the parts of the string you've declared in dataset ('data-to-be-replaced') and replaces them with string you've declared in the button ('data-replacer'):

 const replacers = document.querySelectorAll('.replacer'); const replaceUs = document.querySelectorAll('.replaceMe'); const replaceLinks = (evt) => { const button = evt.currentTarget; const { replacer } = button.dataset; replaceUs.forEach((elem) => { const wholeString = elem.getAttribute('href'); const toBeReplaced = elem.dataset.toBeReplaced; const stringWithReplacement = wholeString.replace(toBeReplaced, replacer); elem.dataset.toBeReplaced = replacer; elem.setAttribute('href', stringWithReplacement); elem.textContent = stringWithReplacement; }); } replacers.forEach((replacer) => replacer.addEventListener('click', replaceLinks));

 <button class='replacer' data-replacer='test'>Replace with "test"</button> <button class='replacer' data-replacer='test2'>Replace with "test2"</button> <ul> <li><a class='replaceMe' href="https://xxxxx.com/example/" data-to-be-replaced='xxxxx' >https://xxxxx.com/example/</a></li> <li><a class='replaceMe' href="https://xxxxx.com/example2/" data-to-be-replaced='xxxxx'>https://xxxxx.com/example2/</a></li> <li><a class='replaceMe' href="https://xxxxx.com/example3/" data-to-be-replaced='xxxxx'>https://xxxxx.com/example3/</a></li> <li><a class='replaceMe' href="https://xxxxx.com/example4/" data-to-be-replaced='xxxxx'>https://xxxxx.com/example4/</a></li> </ul>