フォルダパス一覧のツリー構造への変換 in JavaScript DouKaku?

(相対)フォルダのパスの一覧が与えられ、そのフォルダパスの一覧をツリー構造に変換してください。
フォルダパスの区切り文字は'\'文字を使用しています。

以下のような1行1パスのフォルダのパスがあった場合、
abc\def
abc\def\gh
abc\def\ij
abc\jk\lm
de

イメージとして、以下のようなツリー構造を構築できればOKです。
ROOT
┗abc
　┗def
　　┗gh
　　┗ij
　┗jk
　　┗lm
┗de

ツリーですのでルートがあります。上記のフォルダ一覧はルート以下にぶら下げてください。また、同じフォルダにぶら下がっているサブフォルダの名前は重複させてはいけません。

上記のような出力は結果の分かりやすさとしてあった方がいいですが、なければないで構いません。また、ASやJavaFXでグラフィカルな結果を表示するプログラムでも構いませんが、データ構造はちゃんと作ってください。

function doukaku102(lst, sep){ sep || (sep = '/');
  for(var out = [sep], root = {}, rgx = RegExp(sep), mktree = function(tree, path){
    path && rgx.test(path)
      ? mktree(tree[RegExp.leftContext] || (tree[RegExp.leftContext] = {}), RegExp.rightContext)
      : tree[path] = null;
  }, i = 0, l = lst.sort().length; i < l; i++) mktree(root, lst[i]);
  (function ptree(tree, tab){
    for(var dir in tree) out[out.length] = tab +'┗'+ dir, tree[dir] && ptree(tree[dir], tab +'　');
  })(root, '');
  return out.join('\n');
}

とりあえずIE6とFirefox2(Win)で動作を確認。

<html>
<head>
<script type="text/javascript">
<!--

function traverse(parentDict, parentNode, text)
{
    parentNode.appendChild(document.createTextNode(text));

    var ul = parentNode.appendChild(document.createElement("ul"));

    for (var name in parentDict)
    {
        var li = ul.appendChild(document.createElement("li"));

        traverse(parentDict[name], li, name);
    }
}

function create()
{
    var text = document.getElementById("textarea").value.replace("\r", "");

    var dict = [];

    var pathes = text.split("\n");

    for (var i = 0; i < pathes.length; ++i)
    {
        var node = dict;

        var names = pathes[i].split("\\");

        for (var j = 0; j < names.length; ++j)
        {
            var name = names[j];

            if (name in node)
            {
                node = node[name];
            }
            else
            {
                node = node[name] = [];
            }
        }
    }

    var div = document.getElementById("div");

    if (div.firstChild)
    {
        div.removeChild(div.firstChild);
    }

    var ul = div.appendChild(document.createElement("ul"));

    var li = ul.appendChild(document.createElement("li"));

    traverse(dict, li, "ROOT");
}

-->
</script>
</head>
<body>
<div><textarea id="textarea" rows="10" cols="50"></textarea></div>
<div><input type="button" value="Create tree" onclick="create()"></input></div>
<div id="div"></div>
</body>
</html>

DouKaku?

[topic] フォルダパス一覧のツリー構造への変換

Posted feedbacks - JavaScript

Index

Feed

Other

Link

Pathtraq