如何正确解析并展示 JSON 格式的带引号字符串数组

本文讲解如何安全、准确地解析数据库返回的 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 结构，代码更简、逻辑更稳、维护性更高。