【发布时间】：2012-12-28 01:20:08
【问题描述】：
在这段代码中，我引入了一个非结构化的字符串，并将其解析为一个 JS 对象。我现在需要将它应用到 Web 表单。
Here is the demo。它显示了 Parsed/Structured 对象层次结构，并提醒了目标项目的示例。
创建关键项目（即按钮、图像、标签等）的可点击列表
单击列表项，用值填充表单
修改值并保存回对象
有一些注意事项：
- 有重复的键。我不知道如何在保持数据完整性的同时使它们独一无二。我不能嵌套它们。我唯一能想到的就是为它们附加一个唯一的 id
- 理想情况下，表单将根据对象中的字段动态生成字段。 （即“按钮”具有宽度、高度、过渡和名称，而“标签”具有不同的字段集。
- 某些元素是嵌套的（即“滚动”有自己的“按钮”和“标签”
任何帮助将不胜感激。下面的代码确实创建了一个元素列表，但我无法让它根据我的点击将值加载到表单中。
这里是代码
//Parse String
var str = 'View\n{\n Name: View1;\n Image\n {\n BackgroundImage: Image.gif;\n Position: 0, 0;\n Width: 320;\n Height: 480;\n }\n\n Button\n {\n BackgroundImage: Button.gif;\n Transition: View2;\n Position: 49, 80;\n Width: 216;\n Height: 71;\n }\n\n Button\n {\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n Height: 134;\n }\n\n Label\n {\n Position: 106, 91;\n Width: 96;\n Height: 34;\n Text: "Button";\n FontSize: 32;\n Color: 0.12549, 0.298039, 0.364706, 1;\n }\n Scroll\n {\n Position: 106, 91;\n Width: 96;\n Height: 34;\n Button{\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n Height: 134;\n }\n Button{\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n \n Height: 134;\n }\n\n }\n\n}';
str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
str = str.replace(/;/g, ","); // swap out semicolons with commas
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
str = str.replace(/"/g, ""); // get rid of all double quotes
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
$("#parseList").html(str);
var objStr;
eval("objStr={" + str + "};");
//console.log(objStr.View.Button)
//alert(objStr.View.Scroll.Button.Width);
//End Parse String
$(document).ready(function () {
//Build Initial Object LIst
var initObjectList = '<div id="prePop">';
$.each(objStr.View, function (k, v) {
initObjectList += '<div class="inLineObjects">' + '<div class="key">' + k + '</div>' + '</div>';
});
initObjectList += '</div>';
$('#code').append(initObjectList)
对象输出示例：
View:{
Name:"View1",
Image:{
BackgroundImage:"Image.gif",
Position: [0, 0],
Width: 320,
Height: 480
},
Button:{
BackgroundImage:"Button.gif",
Transition:"View2",
Position: [49, 80],
Width: 216,
Height: 71
},
Button:{
BackgroundImage:"Button2.gif",
Position: [65, 217],
Width: 188,
Height: 134
},
Label:{
Position: [106, 91],
Width: 96,
Height: 34,
Text:"Button",
FontSize: 32,
Color: [0.12549, 0.298039, 0.364706, 1]
},
Scroll:{
Position: [106, 91],
Width: 96,
Height: 34,
Button:{
BackgroundImage:"Button2.gif",
Position: [65, 217],
Width: 188,
Height: 134
},
Button:{
BackgroundImage:"Button2.gif",
Position: [65, 217],
Width: 188,
Height: 134
}
}
}
【问题讨论】：
-
哎呀，使用
JSON对象的parse方法来解析它，不需要用你自己的正则表达式来解决它。 -
这里的实际问题是什么？一般来说，如果您的问题尽可能具体，而不是包含大量内容并说“任何帮助将不胜感激”，您将在 Stack Overflow 上得到更好的回应。我们喜欢在这里提供帮助，您无需询问 ;-) 但您确实需要（或者至少您会得到更好的答案）让我们尽可能轻松地为您提供帮助。
-
您无法控制此输出？如果服务器要向您发送 json，它需要以正确的格式向您发送 valid json（重复键在 JSON 规范中无效）。或者我在这里遗漏了一些东西，输入是任何特定格式（css）吗？
-
只是添加到@Austin 的评论中，
JSON.parse已经在大多数现代浏览器中可用。如果需要支持旧版浏览器，可以从www.json.org下载自己的（功能等效）版本。 -
@machineghost 谢谢。我遇到的最麻烦的事情是a）让这个电流出来填充一个表格，每个表格都有输入。在这段代码中，我已经创建了一个列表，我只需要能够单击一个项目，即“图像”并获得一个表单，该表单具有所选项目中每个 k、v 的输入字段并填充了当前值。修改输入后，它们将被保存回对象。有意义吗？.. jfyi - 我解析的字符串从来都不是数据对象，它是我拥有的程序的指令脚本。我现在只想使用 Web 表单编辑值。
标签： javascript jquery json forms