如何在 JavaScript 中创建代码压缩器 | HTML Minifier

大家好，今天我将向你们展示如何使用 HTML CSS 和 JavaScript 创建 HTML 压缩器，在本文中，我将使用几行 JavaScript 代码创建一个简单的代码压缩器。

HTML Minifier 一步步操作

步骤 1 — 创建新项目

在此步骤中，我们需要创建一个新的项目文件夹和文件（index.html，style.css），以创建一个出色的响应式网站页脚。下一步，您将开始创建网页结构。

您可能还喜欢这些：

第 2 步 — 设置基本结构

在此步骤中，我们将添加 HTML 代码来创建项目的基本结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to make html minifier</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

这是大多数使用 HTML 的网页的基本结构。在标签
内添加以下代码<body>：

<section class="codeminify">
        <textarea class="simplecode" placeholder="Paste or type your data here..."></textarea>
        <button id="htmlMinify">Minify HTML</button>
        <textarea placeholder="Output" class="minifycode"></textarea>
</section>

第 3 步 — 为类添加样式

在此步骤中，我们将向 style.css 文件内的部分类添加样式

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.codeminify {
    display: grid;
    grid-template-columns: auto auto auto;
}
textarea {
    padding: 10px;
    min-width: 420px;
    min-height: 300px;
    font-size: 16px;
}
button#htmlMinify {
    display: block;
    width: 150px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    background: #4b00ff;
    color: #fff;
    border: transparent;
    cursor: pointer;
    outline: 0;
    margin: 0 10px;
}

步骤 4 — 添加几行 JavaScript 代码

在此步骤中，我们将添加一些 JavaScript 代码来缩小 html 代码。

<script>
        var $tag = function(tag) {
            return document.getElementsByTagName(tag);
        }

        function minify_html(type, input, output) {
            output.value = input.value
            .replace(/\<\!--\s*?[^\s?\[][\s\S]*?--\>/g,'')
            .replace(/\>\s*\</g,'><');
        }

        document.getElementById("htmlMinify").addEventListener("click", function(){
            minify_html(
                this.innerHTML, $tag('textarea')[0], $tag('textarea')[1]
            );
        }, false);
</script>

HTML Minifier 最终结果

文章来源：https://dev.to/stackfindover/how-to-create-code-compressor-in-javascript-html-minifier-32i