如何使用 javascript 从浏览器复制 HTML 代码答案

【问题标题】：How to copy HTML code from the browser using javascript如何使用 javascript 从浏览器复制 HTML 代码
【发布时间】：2021-05-31 14:54:10
【问题描述】：

我想通过单击使用 javascript 的按钮来复制 HTML 代码。

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #data {
            background: #eee;
            width: 300px;
            padding: 13px;
            text-align: center;
            font-family: arial;
        }

    </style>
</head>

<body>

    <button type="button" onclick="copyToClipboard('data')">Copy </button>

    <textarea id="data" name="data">

<p>I Want to copy this html code1.</p>
<p>I Want to copy this html code2.</p>


</textarea>


    <script src="doc/jquery.min.js"></script>
    <script src="doc/clipboard.min.js"></script>

    <script>
        window.copyToClipboard = function(elementId) {

            var aux = document.getElementById(elementId);

            aux.select();
            document.execCommand("copy");
        }

    </script>

</body>

</html>

我试试这段代码，但它只显示代码，我希望它显示 HTML 代码的预览。like this

那么如何通过单击按钮从浏览器中复制 HTML 代码？

【问题讨论】：

标签： javascript html button copy

【解决方案1】：

文本区域是纯文本元素。

它不会解析 HTML 的值。

您可能想要研究的是一个所见即所得的编辑器，它支持其内容的 html 导出。

我过去使用过 TinyMCE（自托管，也有付费选项），但肯定还有其他选项。我与 TinyMCE 没有任何关系。

编辑：澄清后，这里是代码示例：

<button onclick="fun_name();">get outerHTML</button>
<div id="idDiv">
  <div id="data">
    <p>I Want to copy this html code1.</p>
    <p>I Want to copy this html code2.</p>
  </div>
</div>

<script>
function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

function fun_name() {
  var elem = document.getElementById("idDiv").outerHTML;
  copyToClipboard(elem)
}
</script>

【讨论】：

我想复制HTML文件中给出的代码，点击按钮即可复制代码。
你没有在你的 q 中问过这个问题。您在其中发布了一个带有 HTML 的文本区域。要从您的页面复制 html，请使用 element.outerHTML 选择它。您可以使用未向用户显示的虚拟文本区域复制到剪贴板。见这里：stackoverflow.com/a/46118025/10290918
我尝试了这段代码，但它不起作用。

我想复制这个html代码1。

我想复制这个html代码2。

function fun_name() { var elem = document.getElementById("idDiv").outerHTML;警报（元素）； elem.select(); document.execCommand("复制"); console.log('Copied Text') } 如何从 div 内部复制 HTML 代码？
添加回答