将缩进的文本列表转换为HTML列表(jQuery) [英] Convert Indented Text List to HTML List (jQuery)

问题描述

我正在尝试创建一个jQuery脚本，该脚本会将任意长度和深度的缩进文本列表转换为格式正确的HTML列表.我将在其上运行该脚本的列表是目录的简单树结构.在树结构中，文件夹用文件夹名称后面的分号表示(文件没有结尾标点符号).鉴于此，我想附加一个< span class ="folder"></span> 或&span class ="file"></span>插入相应的行.

I am attempting to create a jQuery script which will convert an indented text list of arbitrary length and depth into a properly formatted HTML list. The lists on which I will be running this script are simple tree structures for directories. Within the tree structures, folders are denoted by a semicolon following the folder name (and files have no ending punctuation). Given this, I would like to attach a <span class="folder"></span> or <span class="file"></span> to the lines as appropriate.

我发现生成大多数结构相当容易，但是我似乎无法降低递归(我怀疑这是必要的)来确保正确嵌套标签.要实现此功能的页面将包含最新(即3.0.3)的Bootstrap版本，因此随时可以使用其任何功能.我有大约二十个(通常是中止的)代码片段，这些片段我已经尝试过或目前正在尝试进行调整以产生所需的结果.我没有发布大量的(可能无济于事的)代码，而是使用了 JSFiddle 基本形式，将用于输入/输出，一些jQuery，示例列表和一些外部库.

I've found it to be fairly easy to generate most of the structure, but I cannot seem to get the recursion (which I suspect will be necessary) down to ensure that the tags are properly nested. The page on which this will be implemented will include the most recent (i.e., 3.0.3) version of Bootstrap, so feel free to use any of its functionality. I have about two dozen (generally abortive) fragments of code which I've tried or which I'm currently attempting to tweak to produce the desired result. Instead of posting a mass of (likely unhelpful) code, I've created a JSFiddle with the basic form which will be used for input/output, a bit of jQuery, and an example list and some external libraries loaded.

任何帮助或建议将不胜感激.

Any help or suggestions will be greatly appreciated.

推荐答案

尝试一下.我将其复制到您的小提琴中，并且似乎可以正常工作.

Try this. I copied it to your fiddle and it seems to work.

var indentedToHtmlList = function indentedToHtmlList (text, indentChar, folderChar, listType, showIcons) {
  indentChar = indentChar || '\t';
  folderChar = folderChar || ':';
  listType = listType || 'ul';
  showIcons = !!showIcons;

  var lastDepth,
      lines = text.split(/\r?\n/),
      output = '<' + listType + '>\n',
      depthCounter = new RegExp('^(' + indentChar + '*)(.*)');

  for (var i = 0; i < lines.length; i++) {
    var splitted = lines[i].match(depthCounter),
        indentStr = splitted[1],
        fileName = splitted[2],
        currentDepth = (indentStr === undefined) ? 0 : (indentStr.length / indentChar.length),
        isFolder = (fileName.charAt(fileName.length - 1) === folderChar);

    if (isFolder) {
      fileName = fileName.substring(0, fileName.length -1);
    }

    if (lastDepth === currentDepth) {
      output += '</li>\n';
    } else if (lastDepth > currentDepth) {
      while (lastDepth > currentDepth) {
        output += '</li>\n</' + listType + '>\n</li>\n';
        lastDepth--;
      }
    } else if (lastDepth < currentDepth) {
      output += '\n<' + listType + '>\n';
    }

    output += '<li>';
    if (showIcons) {
      output += '<span class=" glyphicon glyphicon-' +
      (isFolder ? 'folder-open' : 'file') +
      '"></span> ';
    }
    output += fileName;

    lastDepth = currentDepth;
  }

  while (lastDepth >= 0) {
    output += '\n</li>\n</' + listType + '>';
    lastDepth--;
  }

  return output;
};

这篇关于将缩进的文本列表转换为HTML列表(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！