本文讲解如何安全、准确地将数据库返回的 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()”的困境。