
本文讲解如何安全、准确地将数据库返回的 json 格式字符串(含双引号包裹的多个字段)解析为纯文本列表,避免正则误分割、转义错误等问题,并提供原生 javascript 与 jquery 的两种健壮实现方案。
在实际开发中,后端常以 JSON 字符串形式返回结构化数据(如 ["Item A", "Item B", "Item C"]),但若前端错误地将其当作普通字符串处理,直接使用 toString() 和正则替换(如按逗号分割),极易因内容中包含英文逗号、引号或特殊符号而引发解析错误——正如问题中所示:原本应作为单个列表项的 "55\" Smart TV, 1x Clear Writing Glass, ..." 被错误拆分为多个碎片。
根本原因在于:你正在用字符串操作“模拟” JSON 解析,而这不是可靠的做法。 正确路径是——信任 JSON 格式,使用标准解析器。
✅ 推荐方案:使用 JSON.parse() 安全解析
假设你从数据库或 API 获取的是如下字符串(注意:这是字符串字面量,不是数组):
const ajaxPlainResponse = '[\"Time Usage: 9.00am - 4.00pm\", \"Rental of Commune Room 01 (7 Hours)\", \"55\\\" Smart TV, 1x Clear Writing Glass, Marker Pen, HDMI Cable, Complimentary WiFi, and Filtered Water\"]';
只需一行解析即可获得真实数组:
const description = JSON.parse(ajaxPlainResponse); // → ["Time Usage: 9.00am - 4.00pm", "Rental of Commune Room 01 (7 Hours)", "55\" Smart TV, 1x Clear Writing Glass, Marker Pen, HDMI Cable, Complimentary WiFi, and Filtered Water"]
随后可轻松生成符合预期的带项目符号的纯文本或 HTML 列表:
▪ 原生 JavaScript(输出到 元素)
const listEl = document.getElementById('feature-list');
description.forEach(item => {
const li = document.createElement('li');
li.textContent = item; // 自动转义,防止 XSS
listEl.appendChild(li);
});▪ 或生成 Markdown 风格文本(适用于非 HTML 环境)
const markdownList = description.map(item => `- ${item}`).join('\n');
console.log(markdownList);
// 输出:
// - Time Usage: 9.00am - 4.00pm
// - Rental of Commune Room 01 (7 Hours)
// - 55" Smart TV, 1x Clear Writing Glass, Marker Pen, HDMI Cable, Complimentary WiFi, and Filtered Water⚠️ 关键注意事项
永远优先 JSON.parse(),而非正则/字符串替换:JSON 是标准格式,其嵌套引号、转义(如 \")、逗号分隔等均由规范定义,正则无法可靠覆盖所有边界情况。
-
确保输入是合法 JSON 字符串:若后端返回未加外层引号(如 [...])或格式不规范,JSON.parse() 会抛出 SyntaxError。建议配合 try...catch 处理:
try { const data = JSON.parse(ajaxPlainResponse); } catch (e) { console.error('Invalid JSON response:', e.message); // 可降级处理或提示用户 } 警惕 XSS 风险:若将 item 直接插入 HTML(如 innerHTML = item),需先做 HTML 转义;使用 textContent 或现代模板方案(如 document.createTextNode())更安全。
-
jQuery 用户提示:若使用 $.ajax(),直接设置 dataType: 'json',jQuery 会自动调用 JSON.parse(),无需手动解析:
$.ajax({ url: '/api/features', dataType: 'json', success(data) { $('#feature-list').empty().append( data.map(text => ` - ${escapeHtml(text)} `).join('') ); } }); function escapeHtml(str) { return str.replace(/[&<>"']/g, c => ({ '&': '&', '<': 'zuojiankuohaophpcn', '>': 'youjiankuohaophpcn', '"': '"', "'": ''' }[c])); }
通过遵循这一模式,你不仅能精准还原原始语义(保留所有标点、空格与引号),还能显著提升代码健壮性与可维护性——告别“调试正则一整天,不如一行 parse()”的困境。










