无法使用 JSON.parse 解析来自 textarea 元素的有效 JSON

Posted 2023-05-07

【中文标题】无法使用 JSON.parse 解析来自 textarea 元素的有效 JSON

【英文标题】：Unable to parse valid JSON from textarea element with JSON.parse

【发布时间】：2021-05-12 14:22:05

【问题描述】：

This question、this one 和类似的没有帮助。

下面的 JSON 是有效的。

但是，调用 JSON.parse 会引发错误。

如何从 textarea 元素中解析有效的 JSON？

JSfiddle：https://jsfiddle.net/6gpdL81e/

let text = document.getElementById("testBox").value;
let jsonObject = JSON.parse(text);

<textarea id="testBox">
    
      
      "name": "Foobar",
      "favorite_pets": ["capybara", "lizard"],
      "favorite_fruits": ["avocado"],
      "address": 
       "city": "FairyVille",
       "street": "42 Main St."
      
    
    
    </textarea>

【问题讨论】：

您的某些空白字符有问题。

您推荐什么作为解决方案？用户像这样上传文本，所以我们需要一些自动化机制来清理文本。只需删除所有前导/尾随空格？

您可以$('#testBox').val().replace(/[^!-~]/g, ''); 有效地删除字符范围 33-126 之外的所有字符，但实际上我不会清理它，如果解析失败，只会向用户返回错误.因为可能存在您必须处理的有效解析错误。

【参考方案1】：

这是因为 jQuery 使用不间断空格 nbsp 或 charcode \xA0 不是正常空格。你需要更换它。

let text = $('#testBox').val();
let jsonObject;
try 
  jsonObject = JSON.parse(text);
 catch (ex) 
  console.log("error: ", ex.message)

text = text.replace(/\xA0/g, " "); // or \s but will also replace newline
jsonObject = JSON.parse(text);
console.log("what the name: ", jsonObject.name)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="testBox">
  
  "name": "Foobar",
  "favorite_pets": ["capybara", "lizard"],
  "favorite_fruits": ["avocado"],
  "address": 
   "city": "FairyVille",
   "street": "42 Main St."
  


</textarea>