如何获取字符串文字并将其保存回原始 JSON？答案

【问题标题】：How do I take a string literal and save it back to raw JSON?如何获取字符串文字并将其保存回原始 JSON？
【发布时间】：2019-08-21 18:46:24
【问题描述】：

我希望能够通过放置文本输入元素的值和“值”来编辑对象值 > JSON.stringify(txt, null, 2) 该部分工作正常。

提交该输入后，我会在所有引号后留下一个包含“/n”和“\”的字符串文字。我试过 regex 和 string.replace() 试图删除那些但没有任何效果，我的输出总是这样的：

 "publisher": "[{\"name\":[\"scripps re\"],\"url\":[\"url.com\"]}]",

我也尝试过JSON.parse(txt)，它记录正常，但结果仍然包含换行符和反斜杠。

问题：

有没有办法从输入元素中获取编辑后的文本并将其转换回没有字符串文字标记的有效 JSON？

我正在使用：

VueJS、JS。

我尝试像这样绑定输入字段的值：

 inputVal = JSON.stringify(object[keyname])

效果很好。

问题：

分配新编辑的txt：

 Vue.set(object, keyname, newValue)

newValue 总是有 /n's 和 \'s

我试过了：

Vue.set(object, keyname, newValue.replace('/n'g,""))

Vue.set(object, keyname, JSON.parse(newValue))


{
  "publisher": "[{\"name\":[\"scripps re\"],\"url\":[\"url.com\"]}]",
  "license": {
  "text": "CC BY-NC 4.0",
  "url": "http://creativecommons.org/licenses/by-nc/4.0/",
  "description": "Attribution-NonCommercial 4.0 International"
}

我如何编辑'license' 的值，例如，使用文本区域输入并保存回有效的 JSON？

预期的结果应该是（美化与否，只是没有换行符）：

{
  "publisher": "[{"name":["scripps re"],"url":["url.com"]}]",
  "license": {
  "text": "CC BY-NC 4.0",
  "url": "http://creativecommons.org/licenses/by-nc/4.0/",
  "description": "Attribution-NonCommercial 4.0 International"
}

【问题讨论】：

当你做 newValue.replace('/n'g,"") 没有删除行尾吗？
不，似乎没有任何效果，我无法理解它们
当我试图摆脱一些与字符串相关的间距时，我会说：str.replace(/[\n\t\r]/ig, ''); 以去除回车、制表符等。
所有这些都应该工作，但由于某种原因没有任何工作，并且该值始终具有 /n 和 \ 。也许是 Vue 做的，IDK...
发布者和许可的每个属性是一个文本输入，还是整个发布者属性只有一个文本输入？

标签： javascript json string vue.js

【解决方案1】：

正则表达式需要更正 -

Vue.set(object,keyname,newValue.replace('/ng',""))

s = "[{\"name\":[\"scripps re\"],\"url\":[\"url.com\"]}]".replace('/ng', "");
console.log(s);

你也可以使用unescape()

console.log(unescape( "[\n {\n \"identifier\": [\n \"IDEN\"\n ],\n \"institute\": [\n \"fds\"\n ],\n \"agency\": [\n \"fds\"\n ]\n }\n]" ));

但是，根据最新（2019 年 8 月）MDN 文档，docodeURI 或 decodeURIComponent 优于 unescape

【讨论】：

"资助者": "[\n {\n \"标识符\": [\n \"IDEN\"\n ],\n \"研究所\": [\n \" fds\"\n ],\n \"agency\": [\n \"fds\"\n ]\n }\n]" 对我不起作用，只是在换行符后添加了更多空间。
我可以看到它在这里工作，但由于某种原因，实际代码它不起作用，结果是一样的。还说 unescape 并没有完全被弃用，但有一个警告。我将尝试进一步查明问题，但感谢您的帮助，我知道为什么它没有采取，这似乎是一件简单的事情......
unescape 已被贬低。一个小注释将有助于未来的审阅者

【解决方案2】：

您可以使用正则表达式中的/s 字符类替换所有空白字符

例如像这样$('textarea').value.replace(/\s/g, '')

【讨论】：

IDK 为什么所有替换方法和正则表达式都不起作用，值仍然相同。我会试着看看它发生在哪里，谢谢你的帮助！
试试这个来检查和测试你的正则表达式是如何工作的； regex101.com
谢谢！！我会用那个

【解决方案3】：

找到问题了！

所以我正在检查 newdata 的类型，以避免在字符串上使用 JSON.parse 并得到错误。问题是结果总是一个字符串，所以这里的所有答案都会起作用。我将其更改为检查字符串的第一个索引以检查对象或数组。现在它工作得很好，因为事情得到了适当的处理。

感谢所有回复，从技术上讲，您的所有答案都应该有效，但问题是部分编码从未被触发。

  if (newdata.value[0]==="{" || newdata.value[0]==="[") {
                        Vue.set(self.meta,keyname.value,JSON.parse(newdata.value) )
                      }else{
                        Vue.set(self.meta,keyname.value,newdata.value)
                      }

【讨论】：