本文详解如何使用 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>如此实现既符合 Web 标准，又具备容错性与安全性，可稳定解析真实业务中的对齐文本数据。
