html转换工具

作者：你没有爱过我发布日期:2025-06-30 浏览:85

<!DOCTYPE html>
<html>
<head>
    <title>HTML 转换工具</title>
</head>
<body>
    <h1>HTML 转换工具示例</h1>
    <p>这是一个简单的 HTML 转换工具示例，用于演示如何将用户输入的文本转换为 HTML 格式。</p>

    <textarea id="inputText" rows="10" cols="50">
        请输入要转换的文本...
    </textarea>
    <br>
    <button onclick="convertToHTML()">转换为 HTML</button>
    <br>
    <div id="outputHTML"></div>

    <script>
        function convertToHTML() {
            // 获取用户输入的文本
            var inputText = document.getElementById("inputText").value;

            // 将文本中的特殊字符转换为 HTML 实体
            var htmlOutput = inputText.replace(/&/g, '&amp;')
                                      .replace(/</g, '&lt;')
                                      .replace(/>/g, '&gt;')
                                      .replace(/"/g, '"')
                                      .replace(/'/g, '&#039;');

            // 将转换后的 HTML 显示在页面上
            document.getElementById("outputHTML").innerHTML = "<pre>" + htmlOutput + "</pre>";
        }
    </script>
</body>
</html>

解释说明：

HTML 结构:
- textarea：用于用户输入需要转换的文本。
- button：点击按钮触发 JavaScript 函数 convertToHTML()，进行文本到 HTML 的转换。
- div：用于显示转换后的 HTML 内容。
JavaScript 部分:
- convertToHTML() 函数获取用户输入的文本，并使用正则表达式将其中的特殊字符（如 <, >, &, ", '）转换为对应的 HTML 实体。
- 最后，将转换后的 HTML 内容显示在页面上的 div 中，使用 <pre> 标签保留格式。

这个示例展示了如何创建一个简单的 HTML 转换工具，确保用户输入的文本可以安全地显示为 HTML。

上一篇：html表格边框单线

下一篇：html text