如何正确解析并格式化带双引号的 JSON 字符串数组为有序列表

本文讲解如何安全、准确地将数据库返回的 json 格式字符串（含双引号包裹的多项内容）解析为纯文本数组，并渲染为符合业务需求的无序列表，避免正则误分割导致的内容断裂。

在实际开发中，后端常以 JSON 字符串形式返回结构化数据（如 ["Item 1", "Item 2", "Item 3"]），但若前端错误地将其当作普通字符串处理，再用正则（如按逗号分割）解析，极易因字段内含逗号、引号或特殊符号而引发解析错误——正如问题中所示："55" Smart TV, 1x Clear Writing Glass, ..." 中的逗号被错误切分，导致设备清单被拆成多行。

根本原因在于：你正在对一个本应被解析为数组的对象，执行字符串层面的脆弱正则操作。 正确做法是——信任 JSON 格式，使用标准解析器。

✅ 正确方案：优先使用 JSON.parse()

假设你从接口或数据库获取的是标准 JSON 字符串（注意：必须是合法 JSON，即双引号需转义、无尾逗号）：

// 示例原始响应（常见于 AJAX text/plain 或未设置 dataType 的场景）
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);

// ✅ 直接遍历，每个元素已是完整字符串
description.forEach((item, index) => {
  console.log(`- ${item}`); // 输出符合预期的三行
});

? 浏览器端渲染示例（原生 JS）

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

⚡ 使用 jQuery 简化（推荐用于传统项目）

若项目已引入 jQuery，可进一步简化：

$.ajax({
  url: '/api/room-details',
  method: 'GET',
  dataType: 'json', // 关键：自动解析 JSON 响应体
  success(response) {
    const $list = $('#feature-list');
    $list.empty(); // 清空旧内容
    response.forEach(text => {
      $list.append(`
${$.text(text)}
`); // $.text() 确保安全插入
    });
  },
  error(xhr) {
    console.error('Failed to load features:', xhr.responseText);
  }
});

⚠️ 注意事项与最佳实践

• 永远不要手动用正则解析 JSON：/,(?=(?:[^"]*"[^"]*")*[^"]*$)/ 这类“聪明正则”极易失效（如嵌套引号、转义异常、Unicode 引号等），且不可维护。
• 验证输入合法性：在 JSON.parse() 前建议包裹 try...catch：

  try {
    const data = JSON.parse(rawString);
  } catch (e) {
    console.error('Invalid JSON received:', rawString, e);
    // 降级处理或报错提示
  }

• 后端配合更佳：确保 API 返回 Content-Type: application/json，前端设置 dataType: 'json'，让框架自动解析，避免手动 JSON.parse()。
• 特殊字符处理：55" Smart TV 中的英文双引号（"）在 JSON 中必须写为 \"，这是合法转义；前端解析后会自动还原为 55" Smart TV，无需额外处理。

通过回归数据本质（JSON → Array → 渲染），而非在字符串层面“猜边界”，即可彻底规避分割错误，提升代码健壮性与可读性。