Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>parse unordered list</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
​
    <script type="text/javascript">
      function Tree(value, subtrees) {
        this.value = value;
        this.subtrees = subtrees;
      }
      
      var getDepth = function(line) {
        var i = 0;
        for (; i < line.length; i++) {
          if (line.charAt(i) != "\t") {
            break;
          }
        }
        return i;
      };
      
      var parseTree = function (value) {
        var lines = value.split("\n");
        
        var trees = {};
        trees[0] = new Tree("", []);
        
        for (var i = 0; i < lines.length; i++) {
          var line = lines[i];
          var depth = getDepth(line);
          var value = line.substring(depth);
          
          var tree = new Tree(value, []);
          trees[depth + 1] = tree;
        
          var parent = trees[depth];
          parent.subtrees.push(tree);
        }
        
        return trees[0];
      };
      
      var createUl = function (trees) {
        var ul = $("<ul>");
        
        for (var i = 0; i < trees.length; i++) {
          var tree = trees[i];
          ul.append(createLi(tree));
        }
        
        return ul;
      };
      
      var createLi = function (tree) {
        var li = $("<li>");
        li.text(tree.value);
        
        if (tree.subtrees.length > 0) {
          li.append(createUl(tree.subtrees));
        }
        
        return li;
      };
      
      $(function() {
        var str = "AAA\n\tAAA-1\n\t\tAAA-1-1\n\t\t\tAAA-1-1-1\n\t\tAAA-1-2\n\t\t\tAAA-1-2-1\n\t\t\tAAA-1-2-2\n\t\tAAA-1-3\n\tAAA-2\n\t\tAAA-2-1\nBBB\nCCC\n\tCCC-1\n\tCCC-2";
        var root = parseTree(str);
        var ul = createUl(root.subtrees);
        $("body").append(ul);
      });
​
    </script>
  </head>
  <body>
  </body>
</html>
​
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers