Как выделить все содержимое контейнера div и скопировать в буфер обмена?

Question

[Shimpanze]

Добрый день!

Подскажите, пожалуйста, есть div с классом entry-content.

<div class="entry-content">
  <p>Привет!</p>
  <p>Мир.</p>
</div>
<br>
<button>Выделить и скопировать в буфер</button>

Мне необходимо при клике на кнопку, автоматически выделить всё содержимое этого дива и скопировать в буфер обмена.

Копирование в буфер, вроде происходит так:

document.execCommand('copy');

А вот как выделить всё содержимое контейнера, никак не пойму. Нужно именно на чистом JS реализовать.

Песочница

Большое спасибо!

Answer 1

[Сергей Соколов]

var content = document.querySelector(".entry-content");
var button = document.querySelector("#button");

function copyToClipboard(el) {
	var range;
	if (document.selection) {
		range = document.body.createTextRange();
		range.moveToElementText(el);
		range.select().createTextRange();
	} else if (window.getSelection) {
		range = document.createRange();
		range.selectNode(el);
		window.getSelection().addRange(range);
	} else return;
	
	document.execCommand("copy");
	
}

button.addEventListener('click', () => copyToClipboard(content));

CodePen

Answer 2

[Дима Паутов]

https://learn.javascript.ru/range-textrange-selection