将文本分隔为嵌套的javascript对象/JSON [英] Delimited text to nested javascript object/JSON

问题描述

我的文本格式为

var text = "{{A-B-C}{A-C-B}D-B}{E}F" //example 1

文本可以是其他类似的内容:

The text can be something else like:

var text = "{{{A-B-C}{C-A-B}D-E}{B-C}E-A}{F}G" //example 2

因此，节点结构可以更改，但是-和{}的定界保持不变以表示层次结构.

So the node structure can change but the delimiting of - and {} remains the same to indicate heirarchy.

我想以此作为d3js树布局的javascript对象或JSON创建一个树.我可以使用lodash/jquery或任何其他我希望的库.

I would like to create a tree out of this either as a javascript object or JSON for d3js tree layout. I can use lodash/jquery or any other library I wish.

对于上面的var文本示例1，我需要的最终布局类似于此图像

The eventual layout I need is like this image, for the var text example 1 above

如何将字符串转换为以下格式的嵌套数据(对于 var text 示例1).我一直在努力寻找一种方法来做.任何帮助或指示，不胜感激.

How can I convert the string to nested data in the format like below (for var text example 1). I have been struggling to find a way to do it. Any help or direction is appreciated.

var textobject = {
  name: "F",
  children: [{
      name: "E",
      children: []
    },
    {
      name: "B",
      children: [{
        name: "D",
        children: [{
          name: "B",
          children: [{
            name: "C",
            children: [{
              name: "A",
              children: []
            }, ]
          }, ]
        }, {
          name: "C",
          children: [{
            name: "B",
            children: [{
              name: "A",
              children: []
            }, ]
          }, ]
        }, ]
      }, ]
    },
  ]
}

推荐答案

您可以通过将数组用作堆栈来解决此问题.下面的代码注释中有正确的解释.

You can solve this by using arrays as stacks. There's a proper explanation from the comments of the code below.

function parseTree(string) {
  // split string into an array
  // reduce the array into a proper tree where the 
  // first and last item will be the entire tree, hence,
  // the access of the first index from the last part
  // of this expression
  return string.split(/(}|{|\-)/)
    .reduce(parseTreeReducer, [])[0];
}

function parseTreeReducer(array, ch, index, original) {
  // always track the index of the open bracket 
  // from the array stack
  let indexBracket = array.lastIndexOf('{');

  if(ch === '{') { // is it an open bracket?
    // store it in the array stack!
    array.push(ch); 
  } else if(ch === '}') { // is it a close bracket?
    // remove the last open bracket
    // this prepares the nodes after the open bracket index
    // to be the children of the next node
    array.splice(indexBracket, 1); 
  } else if(ch !== '-' && ch) { // make sure to ignore '-' key

    // push the node in the array stack
    array.push({ 
      name: ch, // name
      // ensure that we only get the nodes that are after the 
      // last open bracket from the array stack and remove them.
      // These removed nodes will be assigned as children for
      // this current node
      children: array.splice(
        // make sure we don't delete the open bracket
        indexBracket + 1, 
        // only remove items beyond the open bracket index
        array.length - indexBracket - 1 
      ).reverse() // reverse to represent the expected output (optional!)
    });

  }
  // return the array stack
  return array;
}

function parseTree(string) {
  // split string into an array
  // reduce the array into a proper tree where the 
  // first and last item will be the entire tree, hence,
  // the access of the first index from the last part
  // of this expression
  return string.split(/(}|{|\-)/)
    .reduce(parseTreeReducer, [])[0];
}

function parseTreeReducer(array, ch, index, original) {
  // always track the index of the open bracket 
  // from the array stack
  let indexBracket = array.lastIndexOf('{');

  if(ch === '{') { // is it an open bracket?
    // store it in the array stack!
    array.push(ch); 
  } else if(ch === '}') { // is it a close bracket?
    // remove the last open bracket
    // this prepares the nodes after the open bracket index
    // to be the children of the next node
    array.splice(indexBracket, 1); 
  } else if(ch !== '-' && ch) { // make sure to ignore '-' key
  
    // push the node in the array stack
    array.push({ 
      name: ch, // name
      // ensure that we only get the nodes that are after the 
      // last open bracket from the array stack and remove them.
      // These removed nodes will be assigned as children for
      // this current node
      children: array.splice(
        // make sure we don't delete the open bracket
        indexBracket + 1, 
        // only remove items beyond the open bracket index
        array.length - indexBracket - 1 
      ).reverse() // reverse to represent the expected output (optional!)
    });

  }
  // return the array stack
  return array;
}

/* THE CODE BELOW IS ONLY FOR DEMO USAGE */

var input = document.querySelector('input');
var output = document.querySelector('pre');

setOutput();
input.addEventListener('keyup', setOutput);

function setOutput() {
  output.innerHTML = JSON.stringify(parseTree(input.value), 0, 4);
}

.as-console-wrapper{min-height:100%;top:0}
input{width: 100%}
pre{background-color: #ccc; padding: 1em}

<input type="text" 
  autofocus 
  value="{{Axe-Barathrum-Clockwork}{Abaddon-Clinkz-Bane Elemental}Dragon Knight-Bristleback}{Ezalor}Furion" />

<br>

<pre></pre>

这篇关于将文本分隔为嵌套的javascript对象/JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！