本文讲解如何安全、准确地将数据库返回的 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）
<ul id="feature-list"></ul>
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(`<li>${$.text(text)}</li>`); // $.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 → 渲染），而非在字符串层面“猜边界”，即可彻底规避分割错误，提升代码健壮性与可读性。
