How to copy HTML content into a new tab [closed]

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 4 months ago.

Improve this question

I am building a web app and I need to copy an HTML div and everything inside it into a new tab. I am writing this code in JavaScript. So far I have been working on creating a blob and then creating a file to download. This approach copies all the HTML code I need BUT it does not copy the text that has been inputted into any text fields. As I understand, the problem is that the entered text is not part of the HTML code so it cannot be copied. However I cannot find another approach to this, please assist. Thank you

Answer

(Inspired by comment by @vanowm)

First, copy the html (say inside a DIV)

Then you’ll need loop through all input fields and read their value so you can apply them.

So the code is like this (amend to suit your further needs):

<div id=container><html>
<input type=text name=text1 id="text1">
<br><input type=text name=text2 id="text2">
</html></div>

<textarea id=target style="width:100%;height:200px;"></textarea>

<input type=button name=go onclick="trigger();" value="Parse">

<script>
function trigger(){
target0=document.getElementById('container').innerHTML;

text1= document.getElementById("text1").value;
text2= document.getElementById("text2").value;

target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');
target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');

document.getElementById("target").innerHTML=target0;

}
</script>

JavaScript
​x
 
<div id=container><html><input type=text name=text1 id="text1"><br><input type=text name=text2 id="text2"></html></div>​<textarea id=target style="width:100%;height:200px;"></textarea>​<input type=button name=go onclick="trigger();" value="Parse">​<script>function trigger(){target0=document.getElementById('container').innerHTML;​text1= document.getElementById("text1").value;text2= document.getElementById("text2").value;​target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');​document.getElementById("target").innerHTML=target0;​}</script>​

Advertisement

Answer