在线压缩html

作者：花折亦无情发布日期:2026-05-22 浏览:124

<!DOCTYPE html>
<html>
<head>
    <title>在线压缩HTML示例</title>
</head>
<body>
    <h1>在线压缩HTML示例代码</h1>
    <p>以下是用于在线压缩HTML的JavaScript代码示例：</p>

    <textarea id="inputHtml" rows="10" cols="50">
        <html>
            <body>
                <h1>Hello, World!</h1>
                <p>This is a test.</p>
            </body>
        </html>
    </textarea>
    <br>
    <button onclick="compressHtml()">压缩HTML</button>
    <br>
    <textarea id="outputHtml" rows="10" cols="50"></textarea>

    <script>
        function compressHtml() {
            // 获取输入的HTML内容
            var inputHtml = document.getElementById('inputHtml').value;

            // 压缩HTML内容，移除多余的空格和换行符
            var compressedHtml = inputHtml.replace(/\s+/g, ' ').replace(/>\s+</g, '><');

            // 将压缩后的HTML内容显示在输出框中
            document.getElementById('outputHtml').value = compressedHtml;
        }
    </script>
</body>
</html>

解释说明：

HTML结构：页面包含两个<textarea>元素，一个用于输入原始HTML代码，另一个用于显示压缩后的HTML代码。还有一个按钮，点击时会触发压缩操作。
JavaScript函数：
- compressHtml()：该函数获取用户输入的HTML内容，并使用正则表达式去除多余的空格和换行符，最后将压缩后的HTML显示在输出框中。
正则表达式：
- replace(/\s+/g, ' ')：将多个连续的空白字符替换为单个空格。
- replace(/>\s+</g, '><')：将标签之间的多余空白字符移除。

通过这个示例，你可以实现简单的HTML在线压缩功能。

上一篇：html时间代码

下一篇：xml转html