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>