Question 45037 in Html Question posted in
Some basic documentation can be found here.

How to use JavaScript to copy inner HTML, but without html shorthand?

I have a JS function that dynamically fills the inner HTML of a div with id="code-output" with some sample HTML code:

function outputCode() {
    var style = "<p>#main-container {</p><p class='indent-1'>width: 100%;</p><p>}</p>"

    var body = "<p>&ltdiv id='main-container'&gt</p>" + "<p class='indent-1'>&ltdiv id='header'&gt</p>" + "<p class='indent-2'>&lth1&gtThis is a header 1&lt/h1&gt</p>" + "<p class='indent-1'>&lt/div&gt</p>" + "<p>&lt/div&gt</p>"

    code = "<p>&lt!DOCTYPE html&gt</p>" + "<p>&lthtml&gt</p>" + "<p class='indent-1'>&lthead&gt</p>" + "<p class='indent-2'>&ltmeta charset='utf-8'&gt</p>" + "<p class='indent-2'>&ltmeta name='viewport' content='width=device-width, initial-scale=1'&gt</p>" + "<p class='indent-2'>&lttitle&gtMy HTML Theme&lt/title&gt</p>" + "<p class='indent-2'>&ltstyle&gt</p>" + "<div class='code'>" + style + "</div>" + "<p class='indent-2'>&lt/style&gt</p>" + "<p class='indent-1'>&lt/head&gt</p>" + "<p class='indent-1'>&ltbody&gt</p>" + "<div class='code'>" + body + "</div>" + "<p class='indent-1'>&lt/body&gt</p>" + "<p>&lt/html&gt</p>"

    outputBlock = document.getElementById("code-output");

    outputBlock.innerHTML = code;
}

Everything is static at the moment but I plan to have style and body be defined dynamically. Everything is working fine and the sample HTML code fills into the div as expected.

However, I would like to include a button to copy the sample HTML code to clipboard. I have a function to do this:

function copyHtml() {
    var copyText = document.getElementById("code-output").innerHTML;

    navigator.clipboard.writeText(copyText);

    document.getElementById("copied-message").innerHTML = "Copied";
}

This copies all of the code, but the problem is that it copies with the HTML shorthand and I need it to copy with regular tags (e.g. <html></html>, not &lthtml&gt &lt/html&gt).

Please let me know if there is any way to copy the text without the shorthand?

I have tried the above functions and it ends up copying as &lthtml&gt instead of <html>, for example.

Tags:

3

Answers


  1. 0

    You probably want to use HTMLElement.innerText, but I’m linking you to the MDN documentation for HTMLElement.textContent because it discusses some of the nuances between the two.

    Login or Signup to reply.
  2. 0

    The problem is you’re trying to assign a String where you should be assigning an HTML node.

    "innerText" is what you’re looking for.

    document.getElementById("copied-message").innerText = "Copied";

    innerHTML is expecting an instance of an element already existing in the DOM. You can test this out by cloning an element already in the DOM and setting the innerHTMl value to the copy of that element.

    Login or Signup to reply.
  3. 0

    function copyHtml() {
    var copyText = document.getElementById("code-output").innerHTML;

    // Create a temporary textarea element
var textarea = document.createElement("textarea");

// Set its value to the text you want to copy, with regular tags
textarea.value = copyText.replace(/&lt;/g, "<").replace(/&gt;/g, ">");

// Append the textarea to the document
document.body.appendChild(textarea);

// Select the text and copy it to the clipboard
textarea.select();
document.execCommand("copy");

// Remove the temporary textarea
document.body.removeChild(textarea);

document.getElementById("copied-message").innerHTML = "Copied";

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search