如何在JavaScript中将动态字符串JSON显示到Div或Textarea中

问题场景 #

调用API返回的JSON包含多层转义的嵌套JSON字符串（比如示例中Val2字段的值是转义后的JSON），直接显示会保留转义字符，无法呈现清晰的层级结构，需要先解析嵌套内容再格式化展示。

解决步骤 #

核心思路是先递归解析所有嵌套的转义JSON字符串，再对完整的JSON对象进行格式化缩进，最后插入到目标DOM元素中。

1. 递归解析嵌套转义JSON

写一个工具函数，遍历JSON对象的每个属性值，判断是否为可解析的JSON字符串，若是则递归解析成对象：

function parseNestedJson(obj) {
  // 处理数组情况
  if (Array.isArray(obj)) {
    return obj.map(item => parseNestedJson(item));
  }
  // 处理对象情况
  if (typeof obj === 'object' && obj !== null) {
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        const value = obj[key];
        // 尝试解析字符串类型的嵌套JSON
        if (typeof value === 'string') {
          try {
            const parsed = JSON.parse(value);
            obj[key] = parseNestedJson(parsed);
          } catch (e) {
            // 解析失败则保留原字符串
            continue;
          }
        } else if (typeof value === 'object') {
          // 递归处理嵌套对象/数组
          obj[key] = parseNestedJson(value);
        }
      }
    }
    return obj;
  }
  return obj;
}

2. 格式化并插入到DOM元素

解析完成后，用JSON.stringify的第三个参数设置缩进，再将结果插入到DIV或TEXTAREA：

示例HTML结构

<!-- 用于显示的DIV -->
<div id="jsonDisplay" style="white-space: pre-wrap; font-family: monospace; padding: 10px; background: #f5f5f5;"></div>

<!-- 或用于编辑的TEXTAREA -->
<textarea id="jsonTextarea" rows="10" cols="80" style="font-family: monospace;"></textarea>

完整JS逻辑

// 模拟API返回的JSON数据（替换为实际接口返回值）
const apiResponse = '{"id":255,"Val2":"\n  {\"Id\": 28, \"deta\": \"\n  {\n   \\\"strategy1\\\":{\\\"$type\\\":\\\"Text1, text2\\\"}}\"}"}';

// 1. 先解析顶层JSON
let parsedData = JSON.parse(apiResponse);
// 2. 递归解析嵌套的转义JSON
parsedData = parseNestedJson(parsedData);
// 3. 格式化JSON，设置2个空格缩进（可调整为4）
const formattedJson = JSON.stringify(parsedData, null, 2);

// 插入到DIV
document.getElementById('jsonDisplay').textContent = formattedJson;
// 插入到TEXTAREA
document.getElementById('jsonTextarea').value = formattedJson;

3. 效果说明

处理后会将多层转义的JSON解析为完整的嵌套对象，格式化后呈现清晰的层级结构，和预期的<pre>标签内格式一致。如果用DIV显示，需设置white-space: pre-wrap保留缩进和换行；TEXTAREA会自动保留格式。

内容的提问来源于stack exchange，提问作者mohd afzal