如何用JS读取本地txt文件后按奇偶行格式渲染到HTML页面

将以下代码保存为.html文件，直接在浏览器打开即可使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TXT内容格式化展示</title>
</head>
<body>
    <!-- TXT文件选择框 -->
    <input type="file" id="inputfile" accept=".txt">
    <!-- 内容渲染容器 -->
    <div id="output"></div>

    <script>
        const fileInput = document.getElementById('inputfile');
        fileInput.addEventListener('change', function() {
            const selectFile = this.files[0];
            // 增加文件类型校验，避免非txt文件读取异常
            if (!selectFile || selectFile.type !== 'text/plain') {
                alert('请选择txt格式的文件');
                return;
            }
            const reader = new FileReader();
            reader.onload = function() {
                // 把读取到的全文本按换行拆分为行数组，过滤空行避免打乱奇偶顺序
                const lineList = reader.result.split('\n').filter(line => line.trim() !== '');
                // 按索引奇偶给对应行套不同渲染标签
                const renderHtml = lineList.map((content, index) => {
                    return index % 2 === 0 ? `<h2>${content.trim()}</h2>` : `<p>${content.trim()}</p>`
                }).join('');
                // 插入到页面，使用innerHTML才能让HTML标签生效
                document.getElementById('output').innerHTML = renderHtml;
            }
            reader.readAsText(selectFile);
        });
    </script>
</body>
</html>

• 读取TXT文件后先将整段文本按换行符\n拆分，得到每行内容组成的数组，同时过滤掉空行，避免TXT内的多余空行打乱奇偶索引的判断逻辑
• 遍历行数组时，从0开始计数的索引为偶数的项对应标题，使用<h2>标签包裹；索引为奇数的项对应描述，使用<p>标签包裹
• 最终插入页面时使用innerHTML属性而非innerText，保证包裹的HTML标签会被浏览器解析渲染，不会直接展示标签文本

内容的提问来源于stack exchange，提问作者OnionOfDoom