JavaScript解析JSON时result值不符预期 如何修正代码向API传值

问题根因 #

• 字符串内使用HTML转义实体"表示双引号，不符合JSON语法规范，JSON解析器无法识别这类HTML实体，首先就会抛出解析异常。
• JavaScript字符串字面量中的\x5C会被JS引擎优先解析为单个反斜杠\，最终传入JSON解析器的result对应内容会变成MwLYo\/Awp==，JSON解析时会将\/转义序列自动转换为普通斜杠/，导致解析后的result值和预期不符。

修正方案 #

方案1：手动修正字符串语法（推荐） #

直接把字符串中的所有"替换为半角双引号"，同时给\x5C额外增加一个反斜杠做转义，避免JS引擎提前解析转义序列：

var abc = '[{"id": 2,"result": "MwLYo\\\\x5C/Awp=="}]'
console.log(JSON.parse(abc))
// 解析后result值为：MwLYo\x5C/Awp==

方案2：自动解码HTML实体（适用于从HTML中直接获取的字符串） #

如果字符串是从HTML页面中直接复制、无法手动修改格式的场景，可以先做HTML实体解码再执行JSON解析：

var abc = '[{"id": 2,"result": "MwLYo\\\\x5C/Awp=="}]'

// HTML实体解码方法
function decodeHtmlEntity(str) {
  const tempElem = document.createElement('textarea')
  tempElem.innerHTML = str
  return tempElem.value
}

const parsedData = JSON.parse(decodeHtmlEntity(abc))
console.log(parsedData)

处理后得到的parsedData中的result字段就是正确值，可以直接传给API使用。

内容的提问来源于stack exchange，提问作者Abhinav Kant