JSON文件含特殊字符的值显示报错，如何实现正常展示？

嘿，我之前也踩过类似的坑！看起来你的核心问题是JSON中的特殊字符没有正确处理——不管是JSON本身的合法性，还是后续在HTML/JS中渲染时的转义，只要某一步没做好就会触发报错。咱们一步步来拆解解决：

1. 先确保你的JSON本身是合法的 #

JSON里部分特殊字符必须转义，最容易出问题的就是双引号"和反斜杠\。比如你的示例值：

Finish. "Global" & 版权标识（注：lorem）— 日期格式12/3/2017 $100

直接放进JSON会因为未转义的双引号导致解析失败，正确的JSON写法应该是：

{
  "exampleKey": "Finish. \"Global\" & 版权标识（注：lorem）— 日期格式12/3/2017 $100"
}

这里把原字符串里的"改成了\"，JSON解析器就能正确识别了。

2. 处理HTML渲染时的特殊字符 #

从你的代码片段来看，你是要把JSON数据放到<option>里，这时候还要注意HTML的特殊字符（比如&）会被浏览器解析成实体，可能导致显示异常或者JS读取错误。

推荐两种稳妥的处理方式：

• 优先用textContent而非innerHTML：直接设置文本内容，浏览器会自动处理特殊字符的显示，不会解析成HTML：

  $(function() {
    // 假设已经拿到合法解析后的JSON数据
    const optionText = "Finish. \"Global\" & 版权标识（注：lorem）— 日期格式12/3/2017 $100";
    // 更安全的jQuery写法
    const $option = $('<option>').val('your-value').text(optionText);
    $('#component-selected0').append($option);
  });
  

• 手动转义HTML实体：如果必须用innerHTML，把特殊字符转成对应的HTML实体：

  function escapeHtml(text) {
    return text.replace(/&/g, '&')
               .replace(/"/g, '"')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;');
  }
  
  $(function() {
    const rawText = "Finish. \"Global\" & 版权标识（注：lorem）— 日期格式12/3/2017 $100";
    const escapedText = escapeHtml(rawText);
    $('#component-selected0').append(`<option value="your-value">${escapedText}</option>`);
  });
  

3. 排查常见误区 #

• 别手动拼接JSON字符串：如果是后端返回数据，一定要用语言自带的JSON序列化工具（比如Python的json.dumps、Java的Jackson），手动拼接很容易出现转义遗漏。
• 校验JSON合法性：可以用本地工具（比如VS Code的JSON插件）检查你的JSON文件，确保没有语法错误。

内容的提问来源于stack exchange，提问作者Zabiullah V M