Преобразовать текстовый список с отступом в список HTML (jQuery)

Вы можете использовать пробелы и классы для обозначения файлов и папок, но вам следует рассмотреть использование элементов ul и li, которые они были созданы для этого.

Весь список должен быть заключен в элемент ul. Каждая запись в списке верхнего уровня должна создавать элемент li внутри основного элемента. Если элемент является папкой, тогда он должен также добавить другую строку ul. Здесь вам понадобится рекурсия, чтобы обеспечить правильное вложение.

Однако, если вы намереваетесь использовать отступы (без отступов с отступом), вкладка и синтаксический анализ - это проблема сама по себе, которую я не решаю в этом ответе. Для этого примера я просто притворяюсь, что у вас есть волшебная функция, которая превращает текст в анализируемый список, называемый MyList, и что файлы, принадлежащие к папке, находятся за первой точкой с запятой каждого элемента списка.

var turnTextIntoList=function(AText) {
    //magic stuff;
    return SomeList;
};

var populateList=function(AList) {
    var mainelement=jQuery('<ul></ul>');
    for(element in AList) { 
        var the_li=jQuery('<li></li>');
        if(element.indexOf(';')!=-1) {
             the_li.append('<span class="file">'+element+'</span>');
        } else {
              var thefolder=element.split(';')
              the_li.append('<span class="folder">'+thefolder[0]+'</span>');
              the_li.append(populateList(turnTextIntoList(thefolder[1])));
        } 
        mainelement.append(the_li);
    }
    return mainelement;
};

var MyList=turnTextIntoList(MyText);
jQuery('#targetdiv').append(populateList(MyList));

Смотрите, часть рекурсии - это то место, где вы делаете

the_li.append(populateList(turnTextIntoList(thefolder[1])));

который будет поддерживать бурение в уровнях гнездования, пока не достигнет файла, чтобы он мог начать свой путь назад.

Похоже, кто-то уже создал скрипт, который делает это. К сожалению, этот скрипт находится в CoffeeScript, а не в JavaScript. Однако есть ряд онлайн-конвертеров, которые будут конвертировать из CoffeeScript в JavaScript. Благодаря @charlietfl, который предоставил ссылку на рабочий преобразователь, см. Выше.

Вот преобразованный рабочий код:

var bind, blank, convert, index, li, lineToMap, linesToMaps, parse, parseTuples, ptAccum, runConvert, tabCount, ul, ulEnd;

convert = function(text) {
  return parse(text.split('\n'));
};

li = function(t) {
  var html;
  html = "<li>" + t['line'] + "</li>";
  ptAccum.push(html);
  return html;
};

ul = function(t) {
  return ptAccum.push("<ul>" + (li(t)));
};

ulEnd = function() {
  return ptAccum.push("</ul>");
};

ptAccum = [];

index = 0;

parse = function(lines) {
  var ts;
  ts = linesToMaps(lines);
  ptAccum = ["<ul>"];
  index = 0;
  parseTuples(ts, 0);
  ulEnd();
  return ptAccum.join("\n");
};

parseTuples = function(tuples, level) {
  var stop, _p, _results;
  stop = false;
  _p = function() {
    var curLevel, t;
    t = tuples[index];
    curLevel = t['level'];
    index++;
    if (curLevel === level) {
      return li(t);
    } else if (curLevel < level) {
      index--;
      return stop = true;
    } else {
      ul(t);
      parseTuples(tuples, level + 1);
      return ulEnd();
    }
  };
  _results = [];
  while (!stop && index < tuples.length) {
    _results.push(_p());
  }
  return _results;
};

tabCount = function(line) {
  var c, count, i, inc, isTab, tc;
  tc = 0;
  c = '\t';
  count = 0;
  if (line) {
    count = line.length;
  }
  i = 0;
  isTab = function() {
    return c === '\t';
  };
  inc = function() {
    c = line.charAt(i);
    if (isTab()) {
      tc++;
    }
    return i++;
  };
  while (isTab() && i < count) {
    inc();
  }
  return tc;
};

lineToMap = function(line) {
  return {
    line: line,
    level: tabCount(line)
  };
};

blank = function(line) {
  return !line || line.length === 0 || line.match(/^ *$/);
};

linesToMaps = function(lines) {
  var line, _i, _len, _results;
  _results = [];
  for (_i = 0, _len = lines.length; _i < _len; _i++) {
    line = lines[_i];
    if (!(blank(line))) {
      _results.push(lineToMap(line));
    }
  }
  return _results;
};

runConvert = function() {
  var result;
  result = convert($('#textarea-plain-text').val());
  $('#textarea-converted-text').val(result);
  return $('#div-converted-text').html(result);
};

bind = function() {
  return $('#list-conversion-button').click(runConvert);
};

$(bind);

JSFiddle