HTMLのヘッダーにおける階層構成を配列に変換したい

###前提・実現したいこと
例えば、以下の様なHTMLのヘッダー構成のHTMLがあるとき、

html
1<h1>Chapter 1</h1>
2  <h2>section 1-1</h2>
3    <h3>sub-section 1-1-1</h3>
4    <h3>sub-section 1-1-2</h3>
5  <h2>section 1-2</h2>
6    <h3>sub-section 1-2-1</h3>
7<h1>Chapter 2></h1>
8  <h2>section 2-1</h2>
9  <h2>section 2-2</h2>

以下のような配列に起こしたいです。

javascript
1    [
2      'Chapter 1',
3      [
4        'section 1-1',
5        [
6          'sub-section 1-1-1',
7          'sub-section 1-1-2',
8        ],
9        'section 1-2',
10        [
11          'sub-section 1-2-1',
12        ],
13      ],
14      'Chapter 2',
15      [
16        'section 2-1',
17        'section 2-2',
18      ]
19    ]

このとき、シンプルな処理方法としてどうったアルゴリズムがありますでしょうか。

前提

一番先頭は h1タグ
h1->h2->h3と順番であり、h1->h3のように飛ばしは無い

kei344

2017/05/13 08:20

必ずh1から始まり、h1の次にh3が来る事は無い、という状況でしょうか。

momotaro98

2017/05/13 08:33

はい、その前提です。質問文に追記致しました。

行動規範の内容に同意します

回答3件

ベストアンサー

アウトライン

HTML Living Standard におけるアウトラインの事でしょうか。
アウトラインの生成アルゴリズムは下記リンク先で公開されています。

Re: momotaro98 さん

投稿2017/05/13 11:52

think49

総合スコア18162

jQuery使っていますが、これでいいでしょうか？

JavaScript
1$(function() {
2	// 得られる配列
3	var hierarchy = new Array();
4
5	// 配列へアクセスするためのindexを保存しておくための配列
6	var indexPath = [];
7	var lastLevel = 1;
8
9	$(':header').each(function(index, element) {
10		var level = element.nodeName.substr(1) - 0;
11
12		if (level > lastLevel) {
13			enlargeIndexPath();
14		}
15		else if (level < lastLevel) {
16			shrinkIndexPath(lastLevel - level);
17		}
18
19		pushOnHierarchy($(this).text());
20
21		lastLevel = level;
22	});
23
24	// 新たな配列を追加し、配列へアクセスするための階層を深くする
25	function enlargeIndexPath() {
26		var target = getTargetOnHierarchy();
27		indexPath.push(target.length);
28		target.push(new Array());
29	}
30
31	// 配列へアクセスするための階層を、count分浅くする
32	function shrinkIndexPath(count) {
33		indexPath.length = indexPath.length - count;
34	}
35
36	// indexPathをたどって、追加するべき配列上の参照を返す
37	function getTargetOnHierarchy() {
38		var target = hierarchy;
39
40		for (var i = 0; i < indexPath.length; i++) {
41			target = target[indexPath[i]];
42		}
43
44		return target;
45	}
46
47	// objを配列に追加する
48	function pushOnHierarchy(obj) {
49		getTargetOnHierarchy().push(obj);
50	}
51
52	console.log(hierarchy);
53});

投稿2017/05/13 15:47

naomi3

総合スコア1105

何回もループが回るのでそんなに効率の良くない気がする。（取得部分は面倒なのでjQuery）

JavaScript
1let o
2  , k = [ 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ]
3  , tmp = k.reduce( ( prev, curr )=> { prev[ curr ] = []; return prev; }, {} )
4  ;
5$( k.join( ',' ) ).each( ( i, ele )=> {
6	let t = ele.tagName, n = parseInt( t.substr( 1, 1 ), 10 );
7	if ( 6 != n && tmp[ 'H' + ++n ].length > 0 ) {
8		tmp[ t ].push( tmp[ 'H' + n ] );
9		tmp[ 'H' + n ] = [];
10	}
11	tmp[ t ].push( ele.innerText );
12} );
13// console.log( tmp );
14o = k.reduceRight( ( prev, curr )=> {
15	if ( prev.length > 0 ) {
16		tmp[ curr ].push( prev );
17	}
18	return tmp[ curr ];
19}, [] );
20console.dir( o );
21```**動くサンプル：**[https://jsfiddle.net/6cmeajoo/](https://jsfiddle.net/6cmeajoo/)