How do you copy sample code in the clipboard using click of a button

Question

EDIT START*****

This is not a duplicate, my question is bit different than what you have referenced. here is my updated code and I see that I'm getting innerHTML when I do console.log but it does not copy, is that possible if you can have that in a jsFiddler?

html code:

 <div id="mydivid">
     $(document).on('click', '.btn', function() { $(this).toggleClass('active'); });
 </div>

javascript code:

const copy = function() {
    var el = document.getElementById('mydivid');
    const textarea = document.createElement('textarea');
    textarea.setAttribute("name", "codetextarea");
    textarea.value = el.innerHTML;
    alert(el.innerHTML);
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();
}

EDIT END*****

I'm trying to copy code from a code tag using JavaScript. It works, but it copies the text in one long line of text. I want it to copy with the exact format, for an example see this web site: https://leetcode.com/articles/two-sum/#approach-1-brute-force

My question, how can I implement the same logic of copy code as in the above website?

here is my code:

copy: function(component,event,text) {
        // Create an hidden input
        var hiddenInput = document.createElement("input");
        // passed text into the input
        hiddenInput.setAttribute("value", text);
        // Append the hiddenInput input to the body
        document.body.appendChild(hiddenInput);
        // select the content
        hiddenInput.select();
        // Execute the copy command
        document.execCommand("copy");
        // Remove the input from the body after copy text
        document.body.removeChild(hiddenInput);
    }

Answer 1

The problem is that an input cannot have any newline characters in it, so when you assign a string to its .value, and that string contains newline characters, they just disappear:

input.value = 'foo\nbar';
console.log(input.value.includes('\n'));

<input id="input">

Use a textarea instead:

var hiddenInput = document.createElement("textarea");

Live snippet:

const copy = function(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();
};

copy('foo bar');
console.log('done');

Live snippet copying the code from the comment:

const copy = function(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();
};

copy(`<p><b>  var str = "Hello,World!"; </b></p> console.log("hello, there!"); <p><b>  $(document).on('click', '.btn', function() { $(this).toggleClass('active'); }); </b></p>`);
console.log('done');

Another live snippet copying the #mydivid contents from the question:

const copy = function() {
  var el = document.getElementById('mydivid');
  const textarea = document.createElement('textarea');
  textarea.setAttribute("name", "codetextarea");
  textarea.value = el.innerHTML;
  alert(el.innerHTML);
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();
};

copy();

<div id="mydivid">
  $(document).on('click', '.btn', function() { $(this).toggleClass('active'); });
</div>