HTMLのリスト構造をJavascriptの配列に変換したい

Question

###前提・実現したいこと
マインドマップをブラウザ上で作成できるサービスを作っています。
ライブラリを使ってマインドマップの各要素の追加や削除、編集は任せることができましたが、データベースへの保存・読み込みは自分でやる必要があります。

###解決したい問題
データベースから各要素を読み込んで反映させることはできましたが、保存ができていません。
具体的には下記のHTMLコードをJavascriptのコード欄にある形に仕上げたいです。

###該当のソースコード

<ol>
  <li>0-1</li>
  <li>0-2</li>
  <li>0-3
     <ol>
       <li>1-1</li>
       <li>1-2</li>
       <li>1-3
         <ol>
           <li>2-1</li>
           <li>2-2</li>
         </ol>
       </li>
     <li>1-4</li>
     </ol>
  </li>
  <li>0-4</li>
  <li>0-5</li>
</ol>

↓

[0-1,0-2,0-3,[1-1,1-2,1-3,[2-1,2-2],1-4],0-4,0-5]

リストはどこまでも深くなっていくため、単純なループではなく再帰的な関数を用意する必要があると思いますが、なかなかいいアイデアが思いつかず困っています。

###回答を参考に試してみた事

• yamato_hikawa様

まずは入れ子になっていない単純なリスト構造を配列化する仕組みを考えましょう。
以下のコードでできました。

<ol>
  <li class="node">0-1</li>
  <li class="node">0-2</li>
  <li class="node">0-3</li>
</ol>

var count = $(".node").length;
var array = [];
for(var i=0;i<count;i++){
   var tmp_data = $(".node").eq(i).text();
   array.push(tmp_data);
}
console.log(array);  //["0-1", "0-2", "0-3"]

次は入れ子のリスト構造を配列化したいのですが何か良いアイデアはありますでしょうか？
私も考え中です。

Comments

[kei344]

マインドマップのライブラリは何をお使いでしょうか。もし自作で無い場合は配布元URLを追記いただけないでしょうか。

[takumi123]

マインドマップのライブラリは「Simple jQuery Mind Map Diagram Plugin」です。URLは以下になります。

http://www.jqueryscript.net/chart-graph/Simple-jQuery-Mind-Map-Diagram-Plugin-mindmap.html

Answer 1

王道じゃないかもしれませんが……

まず、htmlのol全体を取得します。jQueryのhtml()とかでガリッと。
そして、半角スペースと改行を置換で取り除き1行の文字列にします。
更に次のルールで置換します。

1. ^<ol><li> ＝＞ ["
2. <ol><li> ＝＞ ",["
3. </li></ol></li><li> ＝＞ "],"
4. </li></ol> ＝＞ "]
5. </li><li> ＝＞ ","

＝＞ ["0-1","0-2","0-3",["1-1","1-2","1-3",["2-1","2-2"],"1-4"],"0-4","0-5"]

文字列なので
hoge = eval(置換後の文字列が入った変数)
で配列化してあげればいいかなと

それと、""で囲っているのは文字列として扱うためですので、計算した数字がほしいのなら”はなしです。

Comments

[takumi123]

置換する方法ですか。
全く頭に無かった方法なので非常に興味深いです。
調べて一度やってみたいと思います。

回答いただきありがとうございます！

Answer 2

それ以前に、保存のためだけに変換するのですか？
保存したい部分のルート要素の html() を呼び出したら子ノード孫ノードまで一発で文字列に変換できるので、これを保存すればいいんじゃないでしょうか？
ロードも楽ですよ。

Comments

[takumi123]

回答いただきありがとうございます。なるほど、HTML自体を保存して呼び出す。
気が付きませんでした。

ただ、今回私が作るサービスはマインドマップ×ブログという形で、各ノードがブログタグにもなります。そのため、各要素を分けてデータベースに保存する必要があるため、このような形にする必要があると思います。

貴重な意見ありがとうございました。新しい視点でした！

Answer 3

まずは入れ子になっていない単純なリスト構造を配列化する仕組みを考えましょう。
入れ子をどう処理するかはその後ですね。
単純なリスト構造を配列化する処理が関数化できれば、それを使いまわせると思います。

再帰パターン

var convertArray = function($list) {
  var $li = $list.children('li'),
  arr = [];

  [].map.call($li, function(el, index) {
    var $childList = $(el).children('ol'),
      text = el.childNodes.item(0).nodeValue.trim(),
      childArr;
    
    arr.push(text);

    if ($childList.length > 0) {
      childArr = convertArray($childList);
      arr.push(childArr);
    }
  });

  return arr;
};

var $ol = $('ol').eq(0);
var arr = convertArray($ol);
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"]

/* 配列型→文字列型に変換する場合 */
console.log(JSON.stringify(arr));

文字列置換パターン

他の方が仰っていた文字列置換で行う形は下記で出来ました。

var $ol = $('ol'),
    listHtml = $ol[0].outerHTML;

/＊　改行・半角スペース取り除き ＊/
listHtml = listHtml.replace(/[\n\s]/g, '');

/* 配列文字列化 */
var str = listHtml
.replace(/^<ol><li>/, '["')
.replace(/<ol><li>/g, '",["')
.replace(/<\/li><\/ol><\/li><li>/g, '"],"')
.replace(/<\/li><\/ol>/g, '"]')
.replace(/<\/li><li>/g, '","');

/* 配列化 */
var arr = JSON.parse(str);

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"]

Comments

[takumi123]

単純なリスト構造を配列化することはできました。質問に追記いたしました。

[yamato_hikawa]

回答を追記しました。

Answer 4

あ、出遅れた。

function tree_to_array( $_ol ) {
	var arr = [], $_n = $_ol.find( 'li > .node > .node__text, li > ol' );
	$_n.each( function() { 
		var $_t = $( this ), t = ( $_t.prop( 'tagName' ) === 'ol' ) ? tree_to_array( $_t ) : $_t.text();
		if ( t ) arr.push( t );
	} );
	return arr;
} // （未テスト）
```一応ライブラリのサンプルの構造をもとに書いてみました。

Comments

[takumi123]

回答ありがとうございます。
しっかり読ませていただきます！

Answer 5

配列の構造について

生成される配列に違和感を感じます。

<ol id="mind-map">
  <li>0-1</li>
  <li>0-2</li>
  <li>0-3
    <ol>
      <li>1-1</li>
      <li>1-2</li>
      <li>1-3
        <ol>
          <li>2-1</li>
          <li>2-2</li>
        </ol>
      </li>
    <li>1-4</li>
    </ol>
  </li>
  <li>0-4</li>
  <li>0-5</li>
</ol>

<script>
'use strict';
var array = sample(document.getElementById('mind-map'));
console.log(array); // [0-1,0-2,0-3,[1-1,1-2,1-3,[2-1,2-2],1-4],0-4,0-5]
</script>

「0-3」の子要素を array[3] に置いてますが、両方とも array[2] に存在すべきものじゃないでしょうか。
また、「0-3」 の子要素が2つ以上存在した場合に構造が破綻してしまいます。

アルゴリズム

1. ある要素の子要素郡から fistChild のテキスト値を元にした配列を生成する(※)
2. 子要素郡で childNode.elements.length > 0 なら、children に対しても再帰処理させる事で 1. を適用する

※textContent では子要素郡のテキストも参照するので firstChild に限定します。

コード

<ol id="mind-map">
  <li>0-1</li>
  <li>0-2</li>
  <li>0-3
    <ol>
      <li>1-1</li>
      <li>1-2</li>
      <li>1-3
        <ol>
          <li>2-1</li>
          <li>2-2</li>
        </ol>
      </li>
    <li>1-4</li>
    </ol>
  </li>
  <li>0-4</li>
  <li>0-5</li>
</ol>

<script>
'use strict';
function getArrayByListElement (listElement) {
  var array = [];

  for (var i = 0, children = listElement.children, l = children.length; i < l; i++) {
    var childNode = children[i],
        children2 = childNode.children,
        textNode = childNode.firstChild,
        map = Array.prototype.map;

    if (textNode.nodeType === textNode.TEXT_NODE) {
      array[i] = {firstText: textNode.data.trim()};
    }

    if (children2.length > 0) {
      array[i].children = map.call(children2, getArrayByListElement);
    }
  }

  return array;
}

var array = getArrayByListElement(document.getElementById('mind-map'));
console.log(JSON.stringify(array)); // [{"firstText":"0-1"},{"firstText":"0-2"},{"firstText":"0-3","children":[[{"firstText":"1-1"},{"firstText":"1-2"},{"firstText":"1-3","children":[[{"firstText":"2-1"},{"firstText":"2-2"}]]},{"firstText":"1-4"}]]},{"firstText":"0-4"},{"firstText":"0-5"}]
</script>

Re: takumi123 さん