当用户使用纯 Javascript 按下文本时更改 url link 的一部分

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 link 都被该文本替换。例如，如果用户按下 text1.de，则所有 link 都是

<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所有link都是

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

当用户使用纯 Javascript 按下文本时更改 url link 的一部分

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

javascript

text

replace

onclick