Как сделать скрипт, копирующий «текущий url + якорь объекта», на который происходит нажатие?

Question

[partyzanx]

На странице есть много элементов с уникальным айди, но у всех классы "copy" и "copy2"

<li class="copy" id="exercise1"><span>Download the chinese words worksheet, print it and write it.</span></li> 
<li class="copy" id="exercise2"><span>Download the chinese words worksheet, print it and write it.</span></li> 
<li class="copy" id="exercise3"><span>Download the chinese words worksheet, print it and write it.</span></li>  
<span class="copy2" id="exercise4"><span>Download the chinese words worksheet, print it and write it.</span></span >

Как сделать скрипт, чтобы при нажатии на них происходило молчаливое копирование в буферобмена текущей ссылки страницы + id этого элемента?
Чтобы получалась копированная ссылка, например, site.com/publ/howtodothat#exercise2.
Нужно, чтобы в html больше не добавлялись другие элементы, то есть, чтобы в коде прописывались классы "copy" и "copy2", при нажатии на которых происходит копирование.

Всплывающие оповещения, что ссылка скопирована, я настрою отдельно. Спасибо!

Answer 1

[Anton Bobylev]

window.location.href + event.target.id + document.execCommand('copy')

https://stackoverflow.com/questions/400212/how-do-...

Answer 2

[s-jet]

https://jsfiddle.net/5f9nj91e/1/

Comments

[partyzanx]

у этого скрипта есть баг, если мы зашли по ссылке в которой уже есть якорь, то копирует ссылку с несколькими якорями.
Если мы изначально зашли по ссылке

http://wikihsk.com/publ/chinese-grammar/hsk-1-beginner-basic-and-elementary/basic_singular_pronouns/3-1-0-9#exercise1

и нажали внутри по элементу с айди exercise2 , то получится ссылка

http://wikihsk.com/publ/chinese-grammar/hsk-1-beginner-basic-and-elementary/basic_singular_pronouns/3-1-0-9#exercise1#exercise2

Но я сам поправил, спасибо!!!!! ВОТ РАБОЧИЙ ВАРИАНТ:

<script>let buttons = document.querySelectorAll('.steps li');

Array.prototype.forEach.call(buttons, function(el) {
        el.addEventListener("click", function(event) {
          let tmp   = document.createElement('INPUT')
          let url = window.location.href;
          let str = location.protocol + '//' + location.hostname + location.pathname + location.search +'#'+el.id;
          tmp.value = str; 
          document.body.appendChild(tmp); 
          tmp.select(); 
          document.execCommand('copy'); 
          document.body.removeChild(tmp); 
        });  
});
</script>

[s-jet]

partyzanx, url только тогда не надо и

try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}

добавьте)

[partyzanx]

s-jet, спасибо) Подскажи куда вставить, а то я лишь наблюдательный начинающий программист))))

let buttons = document.querySelectorAll('.steps li');


Array.prototype.forEach.call(buttons, function(el) {
        el.addEventListener("click", function(event) {
          let tmp   = document.createElement('INPUT');
          let str = location.protocol + '//' + location.hostname + location.pathname + location.search +'#'+ el.id;
          tmp.value = str; 
          document.body.appendChild(tmp); 
          tmp.select(); 
          document.execCommand('copy'); 
          document.body.removeChild(tmp); 
        });  
});

И для чего эта команда?)

[s-jet]

partyzanx, Собственно на место вот этой строчки document.execCommand('copy'); . В некоторых случаях выдает ошибку (из спецификации), а второй профит: вы сразу сможете по true вплывающее оповещение показать

[partyzanx]

s-jet, как бы сделать ещё системное уведомление, что ссылка скопирована?

[partyzanx]

s-jet, спасибо большое!)