html在线转义

作者：鱼宝宝睡觉觉发布日期:2025-04-18 浏览:53

<!DOCTYPE html>
<html>
<head>
    <title>HTML 在线转义示例</title>
    <script>
        function escapeHtml() {
            const input = document.getElementById('inputText').value;
            const output = document.getElementById('outputText');
            // 创建一个元素用于转义 HTML
            const tempDiv = document.createElement('div');
            tempDiv.textContent = input;
            output.value = tempDiv.innerHTML;
        }

        function unescapeHtml() {
            const input = document.getElementById('inputText').value;
            const output = document.getElementById('outputText');
            // 创建一个元素用于取消转义 HTML
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = input;
            output.value = tempDiv.textContent || tempDiv.innerText || '';
        }
    </script>
</head>
<body>
    <h1>HTML 在线转义工具</h1>
    <textarea id="inputText" rows="10" cols="50" placeholder="输入要转义或取消转义的 HTML 内容"></textarea><br>
    <button onclick="escapeHtml()">转义 HTML</button>
    <button onclick="unescapeHtml()">取消转义 HTML</button><br>
    <textarea id="outputText" rows="10" cols="50" placeholder="转义或取消转义后的结果将显示在这里"></textarea>
</body>
</html>

解释说明：

HTML 结构：页面包含两个文本区域 (textarea) 和两个按钮。用户可以在第一个文本区域中输入 HTML 内容，然后通过点击按钮进行转义或取消转义操作，结果会显示在第二个文本区域中。
JavaScript 函数：
- escapeHtml()：该函数获取用户输入的内容，并使用 textContent 将其转义为安全的 HTML 字符串，然后将结果输出到第二个文本区域。
- unescapeHtml()：该函数获取用户输入的内容，并使用 innerHTML 将其解析为原始 HTML 内容，然后将结果输出到第二个文本区域。
转义和取消转义：
- 转义：将特殊字符（如 <, >, & 等）转换为对应的 HTML 实体，以防止 XSS 攻击。
- 取消转义：将 HTML 实体转换回原始字符。

上一篇：section html

下一篇：html滚动条隐藏却有滚动效果