JSFiddle - React, Tailwind, and code Playground
by levchenko_d
HTML
<textarea>
- milestone 1 : description goes here
- - task list : tl description goes here
- - - task : tk description goes here
- - - task2 : tk description goes here
- - - task3 : tk description goes here
- milestone 2 : description goes here
- - task list : tl description goes here
- - - task : tk description goes here
- - - task2 : tk description goes here
- - - task3 : tk description goes here
</textarea>
<div class="output"></div>
CSS
textarea{
position: static;
width: 100%;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
padding: 20px;
box-sizing: border-box;
font-size: 12pt;
}
JavaScript
var t = document.querySelector('textarea');
var output = document.querySelector('.output');
function parse(t){
var msA = t.innerHTML.split(/^\s*-\s(?!-)/gm);
function getTasks(s){
var tks = s.split(/^\s*-\s-\s-/gm);
tks = tks.map(function(i){
if(i){
var tk = {},
name = i.match(/^[^:]*/),
desc = i.match(/(?=:\s).*/);
tk.name = name ? name[0] : '';
tk.description = desc ? desc[0].replace(': ', '') : '';
return tk;
}
});
return tks.filter(function(i){ if(i) return i; });
};
function getTaskLists(s){
var tls = s.split(/^\s*-\s-\s(?!-)/gm);
tls = tls.map(function(i){
if(i){
var tl = {},
name = i.match(/^[^:]*/),
desc = i.match(/(?=:\s).*/);
tl.name = name ? name[0] : '';
tl.description = desc ? desc[0].replace(': ', '') : '';
tl.tasks = getTasks(i.replace(/^(?!\s*-).*/, ''));
return tl;
}
});
return tls.filter(function(i){ if(i) return i });
};
msArr = msA.map(function(i){
if(i){
var ms = {},
name = i.match(/^[^:]*/),
desc = i.match(/(?=:\s).*/);
ms.name = name ? name[0] : '';
ms.description = desc ? desc[0].replace(': ', '') : '';
ms.tasksLists = getTaskLists(i.replace(/^(?!\s*-).*/, ''));
return ms;
}
}).filter(function(i){if(i) return i;});
return msArr;
};
output.innerHTML = JSON.stringify(parse(t));