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

本文讲解如何安全、准确地将数据库返回的 json 格式字符串（含嵌套双引号）解析为纯文本列表，避免正则误分割导致内容错乱，并提供原生 javascript 与 jquery 两种健壮实现方案。

在实际开发中，后端常以 JSON 字符串形式返回结构化数据（如 ["Item 1", "Item 2", "Item 3 with \"quoted\" text"]），但若前端错误地将其当作普通字符串处理（例如直接 .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, M
arker Pen, HDMI Cable, Complimentary WiFi, and Filtered Water']

随后可直接遍历生成标准无序列表：

const listEl = document.getElementById('feature-list');
description.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item; // 自动转义，防止 XSS
  listEl.appendChild(li);
});

⚠️ 注意事项：

• 永远验证 JSON 安全性：生产环境务必包裹 try...catch，避免非法输入导致脚本崩溃：

  try {
    const data = JSON.parse(ajaxPlainResponse);
    renderList(data);
  } catch (e) {
    console.error('Invalid JSON response:', e);
    // 可降级显示错误提示
  }

• 不要用正则模拟 JSON 解析：问题中 /(,(?=(?:[^"]*"[^"]*")*[^"]*$)/ 等复杂正则虽在特定场景“凑效”，但无法处理嵌套引号、换行、反斜杠转义等边界情况，维护成本高且不可靠。
• AJAX 场景更简单：若使用 fetch 或 jQuery，直接设置 responseType: 'json' 或 dataType: 'json'，浏览器/库会自动调用 JSON.parse()：

  // jQuery 示例（更简洁）
  $.get('/api/features', function(response) {
    $('#feature-list').empty().append(
      response.map(text => `
  ${$.escapeSelector(text)}
  `).join('')
    );
  });

? 总结：面对带引号的结构化文本，信任标准 JSON 解析器，而非正则“硬刚”语法。它更安全、更简洁、更符合现代 Web 开发规范——让工具做它最擅长的事，开发者专注业务逻辑。