本文讲解如何安全、准确地解析数据库返回的 json 字符串（如 ["a", "b", "c"]），避免正则误分割内部逗号，直接利用 json.parse() 转为数组后按项渲染为列表。
在实际开发中，后端常以 JSON 字符串形式返回结构化数据（例如："[\"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\"]"）。若错误地将其转为字符串再用正则（如按逗号分割）处理，极易因字段内含英文逗号、引号或转义字符而造成错误切分——正如问题中出现的“55" Smart TV”被截断、“and Filtered Water”被孤立成独立行等现象。
根本原因在于：原始数据本质是合法 JSON 数组，而非普通文本。强行用 toString() + 正则替换不仅逻辑复杂、脆弱易错，还绕过了 JavaScript 原生的健壮解析能力。
✅ 正确做法是：优先使用 JSON.parse() 将字符串安全还原为原生数组，再遍历渲染：
// 假设从 API 或数据库获取的是 JSON 字符串（常见于 AJAX 响应）
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);
// 渲染为无序列表（纯 JS 方式）
const list = document.getElementById('list');
description.forEach(item => {
const li = document.createElement('li');
li.textContent = item; // 自动转义，防止 XSS
list.appendChild(li);
});⚠️ 注意事项：
-
务必校验输入：JSON.parse() 在遇到非法 JSON 时会抛出异常，建议包裹 try...catch：
let description = []; try { description = JSON.parse(ajaxPlainResponse); } catch (e) { console.error('Invalid JSON response:', e); description = []; // 降级为空数组 } - 避免手动拼接 HTML：如示例中使用 textContent 而非 innerHTML，可天然防御 XSS；若需富文本，请使用 DOMPurify 等库净化。
-
jQuery 简化版（可选）：若项目已引入 jQuery，AJAX 响应可直接设 dataType: 'json'，省去手动解析：
$.ajax({ url: '/api/items', dataType: 'json', success(response) { $('#list').empty().append( response.map(text => ` - ${text} `).join('') ); } });
总结：面对带双引号的结构化文本，不要用正则“硬切”，而要用语义化解析。JSON.parse() 是专为这类场景设计的标准方案——它尊重引号边界、正确处理转义、兼容所有合法 JSON 结构，代码更简、逻辑更稳、维护性更高。
