如何把纯文本文件数据解析并渲染为 HTML 表格

时间：2026-06-22 10:07:47 编辑：袖梨来源：一聚教程网

本文详解如何使用 jquery 读取本地 txt 文件，按列分割多空格对齐的文本数据，并动态生成包含两列（描述 + 编码）的语义化 html 表格。

本文详解如何使用 jquery 读取本地 txt 文件，按列分割多空格对齐的文本数据，并动态生成包含两列（描述 + 编码）的语义化 html 表格。

要将结构化文本（如制表符或宽空格分隔的两列数据）正确渲染为 HTML 表格，关键在于精准解析字段边界，而非简单按换行符拆分。原始代码中仅用 split('') 导致整行作为单个 <td>，无法体现“Survey Description”与“SurveyCode”的列关系。

实际数据采用多空格对齐（非固定宽度但至少两个连续空格），因此应使用正则表达式 /s{2,}/ 按“双空格及以上”切分行；再对每行用 /s+/ 拆分字段，安全提取首尾有效内容（避免因前后空格导致空数组项）。

以下是优化后的完整 JavaScript 实现：

function populateTable() {    let tableContent = '<table border="1" class="survey-table">';    $.get('http://localhost/survey/surveydetails.txt', function(data) {        // 去除首尾空白并按多空格分隔行（保留空行过滤）        const lines = data.trim().split(//).filter(line => line.trim() !== '');        lines.forEach(line => {            // 按一个或多个空白字符分割，过滤空字符串            const cols = line.trim().split(/s+/).filter(cell => cell.length > 0);            if (cols.length >= 2) {                const description = cols.slice(0, -1).join(' '); // 合并除最后一项外的所有词（处理含空格的描述）                const code = cols[cols.length - 1];                tableContent += `<tr><td>${escapeHtml(description)}</td><td>${escapeHtml(code)}</td></tr>`;            }        });        tableContent += '</table>';        $('#tablediv').html(tableContent);    }).fail(function() {        $('#tablediv').html('<p class="error">⚠️ 数据加载失败，请检查文件路径或服务器配置。</p>');    });}// 防 XSS：基础 HTML 转义function escapeHtml(text) {    const div = document.createElement('div');    div.textContent = text;    return div.innerHTML;}

✅ 关键改进点说明：

立即学习“前端免费学习笔记（深入）”；

使用 trim() 和 filter() 清理空行与空白行；

描述列可能含空格（如 "Customer-Government/Medicare Advantage"），故用 slice(0,-1).join(' ') 动态合并前 N−1 项；

添加 escapeHtml() 防止 XSS 攻击（若文本含 <, > 等符号）；

增加 .fail() 处理网络异常，提升健壮性；

表格添加 border="1" 或 CSS 边框便于调试（生产环境建议用 CSS 控制样式）。

最后，在 <head> 中补充简洁表格样式以提升可读性：

<style>.survey-table {    width: 100%;    border-collapse: collapse;    margin-top: 16px;}.survey-table th,.survey-table td {    padding: 8px 12px;    border: 1px solid #ccc;    text-align: left;}.survey-table th {    background-color: #f5f5f5;    font-weight: bold;}</style>

并在 HTML 中为表格区域添加表头增强语义：

<div id="tablediv">    <table class="survey-table">        <thead>            <tr>                <th>Survey Description</th>                <th>Survey Code</th>            </tr>        </thead>        <tbody>            <!-- 动态填充内容 -->        </tbody>    </table></div>

推荐专题

最新下载

热门教程

如何把纯文本文件数据解析并渲染为 HTML 表格

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程