Skip to content

Commit a879eb3

Browse files
YinlongcodingYinlongcoding
committed
second
1 parent 5653753 commit a879eb3

File tree

4 files changed

+242
-38
lines changed

4 files changed

+242
-38
lines changed

‎JSON_parse.js‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/**
2+
* 传入 JSON 字符串，并初始化指针，解析 JSON 对象
3+
* @param {[string]} jsonString [传入的 JSON 字符串]
4+
* @return {[object]} [解析后的 JOSN 对象]
5+
*/
6+
7+
function jsonpars(jsonString) {
8+
var theJson = '',
9+
index = 0,
10+
onOff = false
11+
/**
12+
* 处理空格
13+
*/
14+
for (var i = 0; i < jsonString.length; i++) {
15+
if (jsonString[i] == '"') {
16+
onOff = onOff ? false : true
17+
}
18+
if (!onOff && (jsonString[i] == ' ' || jsonString[i] == '\n' || jsonString[i] == '\r' || jsonString[i] == '\t')) {
19+
continue
20+
}
21+
theJson = theJson + jsonString[i]
22+
}
23+
return parse()
24+
25+
/**
26+
* [指针指向合适的位置时进行的解析函数，根据字符串不同的表现返回不同的值]
27+
* @param {[string]} jsonString [当前需要解析的字符串（可能是递归后的值）]
28+
* @param {[number]} index) { var indexChar [指针]
29+
* @return {[*]} [解析后的值]
30+
*/
31+
function parse() {
32+
var indexChar = theJson[index]
33+
if (indexChar == '{') {
34+
return parseObject()
35+
}
36+
37+
if (indexChar == '[') {
38+
return parseArray()
39+
}
40+
41+
if (indexChar == 't') {
42+
return parseTrue()
43+
}
44+
45+
if (indexChar == 'f') {
46+
return parseFalse()
47+
}
48+
49+
if (indexChar == 'n') {
50+
return parseNull()
51+
}
52+
53+
if (indexChar == '"') {
54+
return parseString()
55+
}
56+
57+
if (isDigit(indexChar)) {
58+
return parseNumber()
59+
}
60+
}
61+
/**
62+
* [parseNumber 解析值为数字的 value]
63+
* @return {[type]} [数字]
64+
*/
65+
function parseNumber() {
66+
for (var i = index + 1;; i++) {
67+
if (!isDigit(theJson[i])) {
68+
break
69+
}
70+
}
71+
var num = theJson.slice(index, i)
72+
index = i
73+
return parseInt(num)
74+
}
75+
/**
76+
* [判断一个字符能否转换为数字]
77+
* @param {[string]} char [传入的单个字符]
78+
* @return {Boolean} [如果能转换为数字，返回true]
79+
*/
80+
function isDigit(char) {
81+
if (!char) {
82+
return false
83+
}
84+
var the0 = '0'.charCodeAt(0)
85+
var the9 = '9'.charCodeAt(0)
86+
var theChar = char.charCodeAt(0)
87+
if (the0 <= theChar && theChar <= the9) {
88+
return true
89+
} else {
90+
return false
91+
}
92+
}
93+
/**
94+
* [parseString 解析值为字符串的value值]
95+
* @return {[string]} [返回作为值的字符串]
96+
*/
97+
function parseString() {
98+
var theEnd = theJson.indexOf('"', index + 1)
99+
var theString = theJson.slice(index + 1, theEnd)
100+
index = theEnd + 1
101+
return theString
102+
}
103+
/**
104+
* [parseNull 解析 值为null的value值]
105+
* @return {[type]} [返回null]
106+
*/
107+
function parseNull() {
108+
index += 4
109+
return null
110+
}
111+
/**
112+
* [parseFalse 解析值为 false 的 value 值]
113+
* @return {[boolean]} [返回false]
114+
*/
115+
function parseFalse() {
116+
index += 5
117+
return false
118+
}
119+
/**
120+
* * [parseFalse 解析值为 true 的 value 值]
121+
* @return {[boolean]} [返回true]
122+
*/
123+
function parseTrue() {
124+
index += 4
125+
return true
126+
}
127+
/**
128+
* [parseArray 递归解析数组]
129+
* @return {[array]} [返回一个数组]
130+
*/
131+
function parseArray() {
132+
var result = [],
133+
product
134+
index++
135+
for (;;) {
136+
product = parse()
137+
result.push(product)
138+
if (theJson[index] === ',') {
139+
index++
140+
continue
141+
}
142+
if (theJson[index] === ']') {
143+
break
144+
}
145+
}
146+
index++
147+
return result
148+
}
149+
/**
150+
* [parseObject 递归解析对象]
151+
* @return {[object]} [返回对象]
152+
*/
153+
function parseObject() {
154+
var result = {},
155+
key,
156+
value
157+
index++
158+
for (;;) {
159+
key = parseString()
160+
index++
161+
value = parse()
162+
result[key] = value
163+
if (theJson[index] === "}") {
164+
break
165+
}
166+
if (theJson[index] === ",") {
167+
index++
168+
continue
169+
}
170+
}
171+
index++
172+
return result
173+
}
174+
},

‎JSON_parser.js‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,42 @@
1-
/**
2-
* 传入 JSON 字符串，并初始化指针，解析 JSON 对象
3-
* @param {[string]} jsonString [传入的 JSON 字符串]
4-
* @return {[object]} [解析后的 JOSN 对象]
5-
*/
6-
parseJson: function(jsonString) {
1+
var parseBtn = document.querySelector('#btn')
2+
var pText = document.querySelector('p')
3+
4+
parseBtn.addEventListener('click', function(){
5+
var JsonString = document.querySelector('#JSON_area').value
6+
pText.innerHTML = "解析结果已在控制台输出！"
7+
console.log(jsonpars(JsonString))
8+
})
9+
10+
11+
function jsonpars(jsonString) {
712
var theJson = '',
813
index = 0,
914
onOff = false
10-
/**
11-
* 处理空格
12-
*/
15+
// clear blank
1316
for (var i = 0; i < jsonString.length; i++) {
1417
if (jsonString[i] == '"') {
1518
onOff = onOff ? false : true
1619
}
17-
if (!onOff && (jsonString[i] == ' ' || jsonString[i] == '\n' || jsonString[i] == '\r' || jsonString[i] == '\t')) {
20+
if (!onOff &&
21+
(jsonString[i] == ' ' ||
22+
jsonString[i] == '\n' ||
23+
jsonString[i] == '\r' ||
24+
jsonString[i] == '\t')) {
1825
continue
1926
}
2027
theJson = theJson + jsonString[i]
2128
}
22-
return parse()
2329

30+
return parse()
2431
/**
25-
* [指针指向合适的位置时进行的解析函数，根据字符串不同的表现返回不同的值]
26-
* @param {[string]} jsonString [当前需要解析的字符串（可能是递归后的值）]
27-
* @param {[number]} index) { var indexChar [指针]
28-
* @return {[*]} [解析后的值]
32+
* 指针指向合适的位置时进行的解析函数，根据字符串不同的表现返回不同的值
33+
* @param {string} jsonString 当前需要解析的字符串（可能是递归后的值）
34+
* @param {number} index var indexChar[指针]
35+
* @return {*} 解析后的值
2936
*/
3037
function parse() {
3138
var indexChar = theJson[index]
39+
3240
if (indexChar == '{') {
3341
return parseObject()
3442
}
@@ -57,9 +65,10 @@ parseJson: function(jsonString) {
5765
return parseNumber()
5866
}
5967
}
68+
6069
/**
61-
* [parseNumber 解析值为数字的 value]
62-
* @return {[type]} [数字]
70+
* parseNumber 解析值为数字的 value
71+
* @return {number *}
6372
*/
6473
function parseNumber() {
6574
for (var i = index + 1;; i++) {
@@ -72,9 +81,9 @@ parseJson: function(jsonString) {
7281
return parseInt(num)
7382
}
7483
/**
75-
* [判断一个字符能否转换为数字]
76-
* @param {[string]} char [传入的单个字符]
77-
* @return {Boolean} [如果能转换为数字，返回true]
84+
* 判断一个字符能否转换为数字
85+
* @param {string} char 传入的单个字符
86+
* @return {Boolean} 如果能转换为数字，返回true
7887
*/
7988
function isDigit(char) {
8089
if (!char) {
@@ -90,8 +99,8 @@ parseJson: function(jsonString) {
9099
}
91100
}
92101
/**
93-
* [parseString 解析值为字符串的value值]
94-
* @return {[string]} [返回作为值的字符串]
102+
* parseString 解析值为字符串的value值
103+
* @return {string} 返回作为值的字符串
95104
*/
96105
function parseString() {
97106
var theEnd = theJson.indexOf('"', index + 1)
@@ -100,32 +109,32 @@ parseJson: function(jsonString) {
100109
return theString
101110
}
102111
/**
103-
* [parseNull 解析 值为null的value值]
104-
* @return {[type]} [返回null]
112+
* parseNull 解析 值为null的value值
113+
* @return {string *} 返回null
105114
*/
106115
function parseNull() {
107116
index += 4
108117
return null
109118
}
110119
/**
111-
* [parseFalse 解析值为 false 的 value 值]
112-
* @return {[boolean]} [返回false]
120+
* parseFalse 解析值为 false 的 value 值
121+
* @return {boolean} 返回false
113122
*/
114123
function parseFalse() {
115124
index += 5
116125
return false
117126
}
118127
/**
119-
* * [parseFalse 解析值为 true 的 value 值]
120-
* @return {[boolean]} [返回true]
128+
* parseFalse 解析值为 true 的 value 值
129+
* @return {boolean} 返回true
121130
*/
122131
function parseTrue() {
123132
index += 4
124133
return true
125134
}
126135
/**
127-
* [parseArray 递归解析数组]
128-
* @return {[array]} [返回一个数组]
136+
* parseArray 递归解析数组
137+
* @return {array} 返回一个数组
129138
*/
130139
function parseArray() {
131140
var result = [],
@@ -146,8 +155,8 @@ parseJson: function(jsonString) {
146155
return result
147156
}
148157
/**
149-
* [parseObject 递归解析对象]
150-
* @return {[object]} [返回对象]
158+
* parseObject 递归解析对象
159+
* @return {object} 返回对象
151160
*/
152161
function parseObject() {
153162
var result = {},
@@ -170,4 +179,8 @@ parseJson: function(jsonString) {
170179
index++
171180
return result
172181
}
173-
},
182+
}
183+
184+
185+
186+

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# JSON-Parser
22

33
### 一个JSON解析器，JSON对象解析为数组对象，类似JavaSript中JSON.parse()
4-
### 在线解析JSON数据：
4+
### 在线解析JSON数据：https://yinlongcoding.github.io/JSON-Parser.github.io/index.html
55

66
## Attention:
7-
一次解析过多数据，数据解析速度并不保证，另：Do not die!
7+
一次解析过多数据，数据解析速度并不保证，
8+
另：<b>结果输出在控制台</b>

‎index.html‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,28 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>JSON parser</title>
6+
<style>
7+
body {
8+
font-size: 20px;
9+
}
10+
textarea {
11+
font-size: 1em;
12+
/*outline: none;*/
13+
}
14+
#btn {
15+
outline: none;
16+
height: 50px;
17+
font-size: inherit;
18+
border-radius: 10px;
19+
}
20+
</style>
621
</head>
722
<body>
823
<div class="json-parse">
9-
<textarea name="json" id="area" cols="100" rows="10" placeholder="paste the JSON"></textarea>
10-
<textarea name="parse" id="area" cols="100" rows="10" placeholder="parse JSON "></textarea>
11-
<button>click to parse the JSON</button>
24+
<textarea name="json" id="JSON_area" cols="100" rows="10" placeholder="请输入JSON格式字符串，然后点击按钮，在控制台查看结果！">
25+
{"results":[{"searchtext":"how"},{"searchtext":"how about...?"},{"searchtext":"how about that?"},{"searchtext":"how are things?"},{"searchtext":"how are things (with you)?"},{"searchtext":"how are you?"},{"searchtext":"how are you fixed for sth?"},{"searchtext":"how are you keeping?"},{"searchtext":"how are you placed for...?"},{"searchtext":"how come?"}]}</textarea><hr>
26+
<button id="btn">Click to parse data</button>
27+
<p></p>
1228
</div>
1329
</body>
1430
<script src="JSON_parser.js"></script>

0 commit comments

Comments
 (0)