添加“链接”图标以在网页上复制URL

Question

我正在用HTML格式格式化我的会员网站的工会的新合同。我们希望在不同部分（具有名称属性）之后有一个链接图标（或单词“复制链接”）。这将允许成员将指向不同部分的链接复制到他/她的剪贴板中。然后将其他人引向我们非常长的合同的特定部分。我可以使用html代码吗？

这是我的进度：

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

<input size="20" type="text" value="https://www.example.com#ARTICLE2" id="myInput"><button onclick="myFunction()">Copy text</button>

Answer 1

因此添加querySelectorAll以选择要添加到的所有链接。如果选择太多，可能需要对其进行优化。并添加该项目以单击并复制它。

function copyIt(text) {
  var input = document.createElement('input');
  input.setAttribute('value', text);
  document.body.appendChild(input);
  input.select();
  var result = document.execCommand('copy');
  document.body.removeChild(input);
  return result;
}



document.querySelectorAll('a[name]').forEach(function (anchor) {
  anchor.addEventListener("click", function (){
    var page = window.location.href.replace(/#.*$/, '')
    copyIt(page + '#' + anchor.name);
  });
});

a[name]::after {
  content: '\2693';
  cursor: pointer;
}

<a name="ARTICLE5-1"></a>1
<p>a</p>
<a name="ARTICLE5-2"></a>2
<p>b</p>
<a name="ARTICLE5-3"></a>3
<p>c</p>
<a name="ARTICLE5-4"></a>4
<p>d</p>
<a name="ARTICLE5-5"></a>5
<p>e</p>