html转换

作者：ares丶技术魂发布日期:2026-02-25 浏览:73

<!DOCTYPE html>
<html>
<head>
    <title>HTML 转换示例</title>
</head>
<body>
    <h1>HTML 转换示例代码</h1>
    <p>以下是一个简单的 HTML 转换示例，将纯文本转换为 HTML 格式。</p>

    <!-- 原始文本 -->
    <textarea id="originalText" rows="4" cols="50">
这是一个标题

这是一段文字内容。
    </textarea>

    <br><br>

    <!-- 转换后的 HTML -->
    <div id="convertedHTML"></div>

    <script>
        // 获取原始文本并进行转换
        function convertToHTML() {
            var text = document.getElementById('originalText').value;
            var lines = text.split('\n');
            var html = '';

            lines.forEach(function(line) {
                if (line.trim().startsWith('这是')) {
                    html += '<h2>' + line.trim() + '</h2>';
                } else {
                    html += '<p>' + line.trim() + '</p>';
                }
            });

            document.getElementById('convertedHTML').innerHTML = html;
        }

        // 自动调用转换函数
        convertToHTML();
    </script>
</body>
</html>

解释说明：

HTML 结构：页面包含一个 textarea 用于输入原始文本，以及一个 div 用于显示转换后的 HTML 内容。
JavaScript 脚本：通过 convertToHTML 函数读取 textarea 中的文本，并根据文本内容生成相应的 HTML 标签（如 <h2> 和 <p>），然后将生成的 HTML 内容插入到 div 中。
自动执行：页面加载时会自动调用 convertToHTML 函数，将 textarea 中的文本转换为 HTML 并显示。

上一篇：html 列表

下一篇：html上传文件