在这段代码中，我引入了一个非结构化的字符串，并将其解析为一个 JS 对象。我现在需要将其应用于 Web 表单。
这是演示。它显示已解析/结构化对象层次结构，并提醒目标项目的示例。
创建关键项目的可点击列表（即按钮、图像、标签等
单击列表项，使用值填充表单
修改值并保存回对象
有一些警告：
- 有重复的键。我不知道如何在保持数据完整性的同时使它们独一无二。我不能嵌套它们。我唯一能想到的就是为它们附加一个唯一的 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
}
}
}