teratail
回答率
85.34%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTML5に関する質問HTMLのリスト構造をJavascriptの配列に変換したい

編集履歴

回答編集履歴

9

補足追加

2016/07/05 13:49

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -56,9 +56,13 @@
56
56
 
57
57
  console.log(arr); // ["0-1","0-2","0-3",["1-1","1-2","1-3",["2-1","2-2"],"1-4"],"0-4","0-5"]
58
58
 
59
- ```
60
59
 
61
60
 
61
+ /* 配列型→文字列型に変換する場合 */
62
+
63
+ console.log(JSON.stringify(arr));
64
+
65
+ ```
62
66
 
63
67
 
64
68
 

8

変数名の変更、処理の整理

2016/07/05 13:49

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -18,15 +18,13 @@
18
18
 
19
19
 
20
20
 
21
- [].map.call($li, function(item, index) {
21
+ [].map.call($li, function(el, index) {
22
22
 
23
- var $item = $(item),
23
+ var $childList = $(el).children('ol'),
24
24
 
25
- $childList = $item.children('ol'),
25
+ text = el.childNodes.item(0).nodeValue.trim(),
26
26
 
27
- childArr,
27
+ childArr;
28
-
29
- text = item.childNodes.item(0).nodeValue.trim();
30
28
 
31
29
 
32
30
 

7

リファクタリング

2016/07/05 13:36

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -22,25 +22,21 @@
22
22
 
23
23
  var $item = $(item),
24
24
 
25
- $childList = $item.children('ol');
25
+ $childList = $item.children('ol'),
26
+
27
+ childArr,
28
+
29
+ text = item.childNodes.item(0).nodeValue.trim();
30
+
31
+
32
+
33
+ arr.push(text);
26
34
 
27
35
 
28
36
 
29
37
  if ($childList.length > 0) {
30
38
 
31
- var childArr = convertArray($childList);
39
+ childArr = convertArray($childList);
32
-
33
- }
34
-
35
-
36
-
37
- var result = item.childNodes.item(0).nodeValue.trim();
38
-
39
- arr.push(result);
40
-
41
-
42
-
43
- if (childArr) {
44
40
 
45
41
  arr.push(childArr);
46
42
 

6

コード修正

2016/07/05 13:31

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- var result = $item[0].childNodes.item(0).nodeValue.trim();
37
+ var result = item.childNodes.item(0).nodeValue.trim();
38
38
 
39
39
  arr.push(result);
40
40
 

5

再起パターンのコードを修正

2016/07/05 13:26

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- var result = $item.text().replace(/( \s.*|\n)/g, '');
37
+ var result = $item[0].childNodes.item(0).nodeValue.trim();
38
38
 
39
39
  arr.push(result);
40
40
 
@@ -60,7 +60,7 @@
60
60
 
61
61
  var arr = convertArray($ol);
62
62
 
63
- console.log(arr);
63
+ console.log(arr); // ["0-1","0-2","0-3",["1-1","1-2","1-3",["2-1","2-2"],"1-4"],"0-4","0-5"]
64
64
 
65
65
  ```
66
66
 

4

再帰パターン追加

2016/07/05 13:25

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -3,6 +3,66 @@
3
3
  入れ子をどう処理するかはその後ですね。
4
4
 
5
5
  単純なリスト構造を配列化する処理が関数化できれば、それを使いまわせると思います。
6
+
7
+
8
+
9
+ # 再帰パターン
10
+
11
+ ```javascript
12
+
13
+ var convertArray = function($list) {
14
+
15
+ var $li = $list.children('li'),
16
+
17
+ arr = [];
18
+
19
+
20
+
21
+ [].map.call($li, function(item, index) {
22
+
23
+ var $item = $(item),
24
+
25
+ $childList = $item.children('ol');
26
+
27
+
28
+
29
+ if ($childList.length > 0) {
30
+
31
+ var childArr = convertArray($childList);
32
+
33
+ }
34
+
35
+
36
+
37
+ var result = $item.text().replace(/( \s.*|\n)/g, '');
38
+
39
+ arr.push(result);
40
+
41
+
42
+
43
+ if (childArr) {
44
+
45
+ arr.push(childArr);
46
+
47
+ }
48
+
49
+ });
50
+
51
+
52
+
53
+ return arr;
54
+
55
+ };
56
+
57
+
58
+
59
+ var $ol = $('ol').eq(0);
60
+
61
+ var arr = convertArray($ol);
62
+
63
+ console.log(arr);
64
+
65
+ ```
6
66
 
7
67
 
8
68
 

3

修正

2016/07/05 02:19

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -19,10 +19,6 @@
19
19
  var $ol = $('ol'),
20
20
 
21
21
  listHtml = $ol[0].outerHTML;
22
-
23
-
24
-
25
- console.log(listHtml);
26
22
 
27
23
 
28
24
 

2

文字列置換で処理

2016/07/05 01:32

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -3,3 +3,57 @@
3
3
  入れ子をどう処理するかはその後ですね。
4
4
 
5
5
  単純なリスト構造を配列化する処理が関数化できれば、それを使いまわせると思います。
6
+
7
+
8
+
9
+
10
+
11
+ # 文字列置換パターン
12
+
13
+ 他の方が仰っていた文字列置換で行う形は下記で出来ました。
14
+
15
+
16
+
17
+ ```javascript
18
+
19
+ var $ol = $('ol'),
20
+
21
+ listHtml = $ol[0].outerHTML;
22
+
23
+
24
+
25
+ console.log(listHtml);
26
+
27
+
28
+
29
+ /＊　改行・半角スペース取り除き ＊/
30
+
31
+ listHtml = listHtml.replace(/[\n\s]/g, '');
32
+
33
+
34
+
35
+ /* 配列文字列化 */
36
+
37
+ var str = listHtml
38
+
39
+ .replace(/^<ol><li>/, '["')
40
+
41
+ .replace(/<ol><li>/g, '",["')
42
+
43
+ .replace(/<\/li><\/ol><\/li><li>/g, '"],"')
44
+
45
+ .replace(/<\/li><\/ol>/g, '"]')
46
+
47
+ .replace(/<\/li><li>/g, '","');
48
+
49
+
50
+
51
+ /* 配列化 */
52
+
53
+ var arr = JSON.parse(str);
54
+
55
+
56
+
57
+ console.log(arr); //["0-1","0-2","0-3",["1-1","1-2","1-3",["2-1","2-2"],"1-4"],"0-4","0-5"]
58
+
59
+ ```

1

修正

2016/07/05 01:27

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -2,4 +2,4 @@
2
2
 
3
3
  入れ子をどう処理するかはその後ですね。
4
4
 
5
- 単純なリスト構造を配列化する処理が関数ができれば、それを使いまわせると思います。
5
+ 単純なリスト構造を配列化する処理が関数化できれば、それを使いまわせると思います。