JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<dl>
		<dt>凡例</dt>
		<dd class="capturable">捕獲可能</dd>
		<dd class="buyable">購入可能</dd>
	</dl>
<textarea id="recipeList"...

CSS

.capturable{color:blue;}
.buyable{color:red;}
#list{font-size:small}

JavaScript

var recipeListStr = jQuery('#recipeList').val();
var questListStr = jQuery('#questList').val();
var parseStr = function(str){
	var spl = str.split("\n");
	var i, l;
	var ret = [];
	for(i=0;i<spl.length;i++){
		if(spl[i]){
			var l = spl[i].split('|');
			if(l[l.length-1] != 'h'){
				l.shift();
				l.pop();
				ret.push(l);
			}
		}
	}
	return ret;
};
var recipe = function(s){
	var list = parseStr(s);
	var ret = {};
	for(var i=0;i<list.length;i++){
		if(list[i]){
			// No|誕生|基本|生贄|Lv|店|備考|h
			ret[list[i][1]] = {
				no: list[i][0],
				name: list[i][1],
				left: list[i][2],
				right: list[i][3],
				lv: list[i][4],
				shop: list[i][5],
				other: list[i][6]
			};
		}
	}
	return ret;
}(recipeListStr);

var capture = function(s){
	var list = parseStr(s);
	var ret = {};
	for(var i=0;i<list.length;i++){
		if(list[i]){
			// No|誕生|基本|生贄|Lv|店|備考|h
			ret[list[i][2]] = true;
		}
	}
	return ret;
}(questListStr);

var shop = function(s){
	var list = parseStr(s);
	var ret = {};
	for(var i=0;i<list.length;i++){
		if(list[i] && list[i][5]){
			ret[list[i][1]] = true;
		}
	}
	return ret;
}(recipeListStr);

function getRecipe(target, indent){
	var ret = [];
	console.log(target);
	var currentItem = {"target": target, "indent": indent};
	ret.push(currentItem);
	if(recipe[target.left]){
		var rl = getRecipe(recipe[target.left], indent+1);
		for(var i=0;i<rl.length;i++){
			ret.push(rl[i]);
		}
	}
	if(recipe[target.right]){
		var rr = getRecipe(recipe[target.right], indent+1);
		for(var j=0;j<rr.length;j++){
			ret.push(rr[j]);
		}
	}
	console.log(ret);
	return ret;
};

function render(list){
	var ret = '<ul>';
	for(var i=0;i<list.length;i++){
		ret += renderRecipe(list[i]);
	}
	return ret;
}
function renderRecipe(item){
	var recipe = item.target;
	var indent = item.indent;
	return '<li style="margin-left:' + indent*20 + 'px;">' +
	renderItem(recipe.name) + ' = ' +
	renderItem(recipe.left) + ' + ' +
	renderItem(recipe.right) +
	"</li>\n";
}
function...