JSFiddle - React, Tailwind, and code Playground

by Danielo Rodriguez

HTML

<div id="main">
    <form>    
        <textarea id="data" rows="10" cols="30">a:Pene*b:nabo*c:culo*teta*pene*d:aberración anal total*f:destruccion de la humanidad</textarea>    
        <textarea id="solution" rows="10" cols="30"></textarea>
    </form>    
    
</div>

CSS

div{ border:1px solid}

JavaScript

$(document).ready(function(){
    var template=[{name:"a"},{name:"b"},{name:"c"},{name:"f"}];
    var strData=$("#data").val();
    var data=strData.split('*');
    var lastMatch=0;
    for(var i=0;i<data.length;i++)
    {
        for(var j=0;j<template.length;j++)
            if(startsWith(data[i],template[j].name))
            {
                lastMatch=j;
                data[i]=extractFrom(":",data[i]);
                break;
            }
        
        "value" in template[lastMatch] ? template[lastMatch].value+=data[i]+'\n' : template[lastMatch].value=data[i]+'\n' ;
    }
    
    $("#solution").val(template);
    console.log(template);
    
    function startsWith(text,starts){
      text=text.toLowerCase(); starts=starts.toLowerCase();
      return starts == text.slice(0,starts.length);
    }
    
    function extractFrom(match,text)
    {
        var index = text.indexOf(match)+1;
        return text.slice(index);
    }
    
});