JavaScript将缩进文本转换为HTML列表重复顶层<李>'s为<ul>'s

JavaScript to Convert Indented Text to HTML List Duplicating Top-Level <li>'s as <ul>'s

本文关键字:lt gt ul 文本 缩进 转换 HTML JavaScript 列表      更新时间:2023-09-26

我目前正在使用以下脚本将缩进的纯文本转换为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项。然而,这是一个比复制错误小得多的问题。

虽然在这个线程中询问的特定问题(即,为什么问题中的脚本在创建新的ul时复制了顶级li)仍然没有得到回答,但对于其他找到这个线程的人来说,找到潜在问题的解决方案(即,从缩进的文本生成HTML列表)可能会有所帮助。为此,这里有一个页面,它目前正在使用一个工作脚本来实现这一点:http://w3c.docs.omnifora.com/tools/convert-plain-text-to-html-list/.当然,脚本可以很容易地从页面的源代码中提取(脚本本身被命名为"缩进文本到html with glyphicons.js")。