Question

我目前正在使用以下脚本将缩进的纯文本转换为HTML列表：

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);

除了两个小例外，这个脚本正在做它应该做的事情。不幸的是，其中一个例外使得脚本实际上无法用于其预期目的（从缩进的目录树中制作HTML列表）。主要问题是该脚本似乎将任何顶级li复制为ul。这是一个JSFiddle，其中包含使用此脚本的表单。正如您所看到的，当它不应该这样做时，它显然是重复项目。

另一个小问题是我想修改脚本以将<span class="folder"></span>附加到以分号结尾的任何li项目，并将<span class="file"></span>附加到任何li项目不以分号结尾。但是，这比复制错误要小得多。

Answer 1

虽然具体问题（即问题本身中的脚本在创建新li时复制顶级ul的原因）在此主题中提出的问题仍未得到答复，但可能是对于发现此线程有解决底层问题的其他人（即从缩进文本生成HTML列表）有帮助。为此，这是一个目前正在使用工作脚本来实现这一目的的页面：http://w3c.docs.omnifora.com/tools/convert-plain-text-to-html-list/。当然，脚本可以很容易地从页面源中提取（脚本本身被命名为“indented-text-to-html-with-glyphicons.js”）。

用于将缩进文本转换为HTML列表的JavaScript将顶级<li>复制为<ul>的</ul> </li>

1 个答案: