当用户使用纯 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>