
本文讲解如何安全、准确地解析数据库返回的含双引号的 json 格式字符串(如 ["item1", "item2", "..."]),避免正则误分割导致内容断裂,并直接映射为结构化列表。核心方案是使用 json.parse() 替代复杂正则处理。
在实际开发中,后端常以 JSON 字符串形式返回数组数据(例如:"[\"Time Usage: 9.00am - 4.00pm\", \"Rental of Commune Room 01 (7 Hours)\", \"55\\\" Smart TV, ...\"]")。若错误地将其视为纯文本并用正则(如按逗号分割)处理,极易因字段内含英文逗号、引号转义或嵌套标点而破坏语义——正如原代码中将第三项 "55\" Smart TV, 1x Clear Writing Glass, ..." 错误切分为多行。
✅ 正确做法是:先解析 JSON,再遍历数组。无论字符串内是否含双引号、逗号、换行或转义字符(如 55\"),JSON.parse() 都能严格遵循 JSON 规范还原原始数组:
// 假设这是从 API 或数据库获取的原始 JSON 字符串 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); // 输出即为纯净数组:[str1, str2, str3] console.log(description); // → ["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 list = document.getElementById('list');
description.forEach(item => {
const li = document.createElement('li');
li.textContent = item; // 自动转义,防止 XSS
list.appendChild(li);
});? 关键注意事项:永远优先尝试 JSON.parse():只要后端返回的是标准 JSON 字符串(即使含转义引号),它就是最可靠、最简洁的解析方式;避免手动正则分割:/(? `${txt}`).join('')); } });
综上,面对带引号的结构化文本,回归数据本质(JSON)而非文本表象(字符串),是解决此类问题最稳健、最可维护的工程实践。









