Bem, se você veio até aqui com certeza não é leigo no assunto, portanto vamos direto ao ponto.
Para fazer isso, primeiro é necessário do elemento HTML com o texto a ser copiado e um botão.
E agora o JavaScript
if( document.querySelector("#text") ) {
let btnCopy = document.querySelector("#copy");
let text = document.querySelector("#text");
btnCopy.addEventListener('click', function() {
text.select();
text.setSelectionRange(0, 99999);
navigator.clipboard.writeText(text.value);
btnCopy.innerText = "Texto copiado";
window.setTimeout(function() {
btnCopy.innerText = "Copiar texto";
}, 3500);
});
}
No exemplo eu usei o elemento de formulário textarea, mais pode ser um outro elemento como uma tag div, ai é só alterar o value por innerText ou innerHTML
Também é modificado o texto do botão por um tempo determinado.
Se preferir, ou se houver outra necessidade, é possível configurar para que o texto retorne ao padrão `Copiar texto` assim que o mouse for retirado do botão.
if( document.querySelector("#text") ) {
let btnCopy = document.querySelector("#copy");
let text = document.querySelector("#text");
btnCopy.addEventListener('click', function() {
text.select();
text.setSelectionRange(0, 99999);
navigator.clipboard.writeText(text.value);
btnCopy.innerText = "Texto copiado";
});
btnCopy.addEventListener('mouseout', function() {
btnCopy.innerText = "Copiar texto";
});
}