當用戶使用純 Javascript 按下文本時，更改 url 鏈接的一部分

Question

有什么簡單的方法可以做到這一點（使用純javascript）？

如果我有

<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>
.
.
.

我希望當用戶按下 text1.de 或 text2.com... 所有 xxxxx.com 鏈接都被該文本替換。 例如，如果用戶按下 text1.de 所有鏈接都是

<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>
.
.
.
    

如果按 text3.com 所有鏈接都是

<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

我不知道你的情況的所有條件，但至少這可以完成工作。 它替換您在數據集中聲明的字符串部分（'data-to-be-replaced'），並用您在按鈕中聲明的字符串（'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>