当前位置：首页 > 文章列表 > 文章 > 前端 > 双引号JSON数组解析与格式化技巧

双引号JSON数组解析与格式化技巧

2026-02-04 18:45:55 0浏览收藏

大家好，今天本人给大家带来文章《双引号 JSON 数组解析与格式化方法》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

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

本文讲解如何安全、准确地将数据库返回的 JSON 格式字符串（含双引号包裹的多个字段）解析为纯文本列表，避免正则误分割、转义错误等问题，并提供原生 JavaScript 与 jQuery 的两种健壮实现方案。

在实际开发中，后端常以 JSON 字符串形式返回结构化数据（如 ["Item A", "Item B", "Item C"]），但若前端错误地将其当作普通字符串处理，直接使用 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, Marker Pen, HDMI Cable, Complimentary WiFi, and Filtered Water"]

随后可轻松生成符合预期的带项目符号的纯文本或 HTML 列表：

▪ 原生 JavaScript（输出到
元素）

<ul id="feature-list"></ul>

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

▪ 或生成 Markdown 风格文本（适用于非 HTML 环境）

const markdownList = description.map(item => `- ${item}`).join('\n');
console.log(markdownList);
// 输出：
// - 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

⚠️ 关键注意事项

永远优先 JSON.parse()，而非正则/字符串替换：JSON 是标准格式，其嵌套引号、转义（如 \"）、逗号分隔等均由规范定义，正则无法可靠覆盖所有边界情况。
确保输入是合法 JSON 字符串：若后端返回未加外层引号（如 [...]）或格式不规范，JSON.parse() 会抛出 SyntaxError。建议配合 try...catch 处理：
```
try {
  const data = JSON.parse(ajaxPlainResponse);
} catch (e) {
  console.error('Invalid JSON response:', e.message);
  // 可降级处理或提示用户
}
```
警惕 XSS 风险：若将 item 直接插入 HTML（如 innerHTML = item），需先做 HTML 转义；使用 textContent 或现代模板方案（如 document.createTextNode()）更安全。

jQuery 用户提示：若使用 $.ajax()，直接设置 dataType: 'json'，jQuery 会自动调用 JSON.parse()，无需手动解析：

$.ajax({
  url: '/api/features',
  dataType: 'json',
  success(data) {
    $('#feature-list').empty().append(
      data.map(text => `<li>${escapeHtml(text)}</li>`).join('')
    );
  }
});

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, c => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
  }[c]));
}

通过遵循这一模式，你不仅能精准还原原始语义（保留所有标点、空格与引号），还能显著提升代码健壮性与可维护性——告别“调试正则一整天，不如一行 parse()”的困境。

今天关于《双引号JSON数组解析与格式化技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！