JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

Correct: <input id='correct'/><br>
Given: <textarea id='given'>Mandibuzz,Polestar,Gengar,Alolan Muk,Pidgeot
Mawile,Leafeon,Charizard,Skarmory,Primarina
Braixen,Skarmory,Lucario,Umbreon,Hydreigon
Skarmory,Gengar,Primarina,Mawile,Umbreon
Skarmory,Primarina,Mawile,Mandibuzz,Umbreon
Umbreon,Alolan Muk,Skarmory,Mawile,Primarina
Polestar,Umbreon,Mawile,Primarina,Skarmory
Pidgeot,Umbreon,Mawile,Primarina,Skarmory</textarea><br>
Users: <textarea id='users'>Jacharias
Eclips98
Nobody_knows_her
KitsuneKaimei
Harmona
CharmanderForLive
Eclips98
SilverQuill</textarea><br>
Sprites: <textarea id='sprites'>Polestar - https://staticpokeheroes.com/img/pokemon/img.php?c=0385s
Gengar - https://staticpokeheroes.com/img/pokemon/img.php?c=094m
Umbreon - https://staticpokeheroes.com/img/pokemon/img.php?c=1197
Mawile - https://staticpokeheroes.com/img/pokemon/img.php?c=0303m&g=f
Braixen - https://staticpokeheroes.com/img/pokemon/img.php?c=1654&g=f
Leafeon - https://staticpokeheroes.com/img/pokemon/img.php?c=0470
Alolan Muk - https://staticpokeheroes.com/img/pokemon/img.php?c=089a&g=f
Pidgeot - https://staticpokeheroes.com/img/pokemon/img.php?c=118&g=f
Hydreigon - https://staticpokeheroes.com/img/pokemon/img.php?c=0635&g=f
Charizard - https://staticpokeheroes.com/img/pokemon/img.php?c=06mx
Primarina - https://staticpokeheroes.com/img/pokemon/img.php?c=1730
Skarmory - https://staticpokeheroes.com/img/pokemon/img.php?c=0227m&g=f
Mandibuzz - https://staticpokeheroes.com/img/pokemon/img.php?c=1630&g=f
Lucario - https://staticpokeheroes.com/img/pokemon/img.php?c=1448s
</textarea><br>
<button onclick='generateBBCode()'>Generate</button><button onclick='gen2()'>Gen2</button>
<textarea id='output'></textarea>

CSS

TSS
Blaziken - https://staticpokeheroes.com/img/pokemon/img.php?c=0257m
Ninetales - https://staticpokeheroes.com/img/pokemon/img.php?c=138&g=f
Solgaleo - https://staticpokeheroes.com/img/pokemon/img.php?c=1791
Charizard - https://staticpokeheroes.com/img/pokemon/img.php?c=16
Castform - https://staticpokeheroes.com/img/pokemon/img.php?c=1351
Alolan Ninetales - https://staticpokeheroes.com/img/pokemon/img.php?c=038a&g=f
Luxray - https://staticpokeheroes.com/img/pokemon/img.php?c=1405&g=f
Garchomp - https://staticpokeheroes.com/img/pokemon/img.php?c=0445&g=f
Teslagon - https://staticpokeheroes.com/img/pokemon/img.php?c=0635s
Meganium - https://staticpokeheroes.com/img/pokemon/img.php?c=0154
Umbreon - https://staticpokeheroes.com/img/pokemon/img.php?c=1197
Lucario - https://staticpokeheroes.com/img/pokemon/img.php?c=0448&g=f
Pidgeot - https://staticpokeheroes.com/img/pokemon/img.php?c=018m&g=f

ISFIC
Zekrom - https://staticpokeheroes.com/img/pokemon/img.php?c=0644
Altaria - https://staticpokeheroes.com/img/pokemon/img.php?c=0334mc&g=f
Lapras - https://staticpokeheroes.com/img/pokemon/img.php?c=1131
Emboar - https://staticpokeheroes.com/img/pokemon/img.php?c=0500
Metagross - https://staticpokeheroes.com/img/pokemon/img.php?c=1376
Charizard - https://staticpokeheroes.com/img/pokemon/img.php?c=16my
Gogoat - https://staticpokeheroes.com/img/pokemon/img.php?c=0673
Eevee - https://staticpokeheroes.com/img/pokemon/img.php?c=1133&g=f
Liepard - https://staticpokeheroes.com/img/pokemon/img.php?c=1510&g=f
Komala - https://staticpokeheroes.com/img/pokemon/img.php?c=0775a&g=f
Lucario - https://staticpokeheroes.com/img/pokemon/img.php?c=0448m
Pumpkaboo - https://staticpokeheroes.com/img/pokemon/img.php?c=1710&g=f
Vaporeon - https://staticpokeheroes.com/img/pokemon/img.php?c=1134&g=f
Lugia - https://staticpokeheroes.com/img/pokemon/img.php?c=0249ret

DL
Polestar - https://staticpokeheroes.com/img/pokemon/img.php?c=0385s
Gengar -...

JavaScript

function generateBBCode() {
	var correct = document.getElementById('correct').value;
  var given = document.getElementById('given').value;
  var users = document.getElementById('users').value;
  var sprites = document.getElementById('sprites').value;
  correct = correct.split(',');
  var bbcode = '';
  lines = given.split('\n');
  users = users.split('\n');
  for (var l = 0; l < lines.length; l++) {
  	given = lines[l].split(',');
    bbcode += '[b]' + (l+1) + '[/b] - [user]' + users[l] + '[/user]\'s guess:\n'
    for (var i = 0; i < given.length; i++) {
      var regex = given[i] + ' - (https:.+?)\n';
      var img = sprites.match(regex)[1];
      var color = 'red';
      for (var j = 0; j < correct.length; j++) {
        if (given[i] == correct[j]) {
          color = 'orange';
        }
      }
      if (given[i] == correct[i]) {
        color = 'green';
      }
      bbcode += '[left][right][img]' + img + '[/img][/right][right]\n[b]' + (i+1) + '[/b][color=' + color + ']\n⬤\n\n[/color][/right][/left]';
    }
    bbcode += '\n\n\n\n\n\n';
  }
	var output = document.getElementById('output');
  output.innerHTML = bbcode;
}

function gen2() {
	var correct = document.getElementById('correct').value;
  var given = document.getElementById('given').value;
  var users = document.getElementById('users').value;
  var sprites = document.getElementById('sprites').value;
  correct = correct.split(',');
  var bbcode = '';
  lines = given.split('\n');
  users = users.split('\n');
  for (var l = 0; l < lines.length; l++) {
  	given = lines[l].split(',');
    bbcode += '[b]' + (l+1) + '[/b] - [user]' + users[l] + '[/user]\'s guess:\n[size=14]'
    for (var i = 0; i < given.length; i++) {
      var regex = given[i] + '.+?c=\\d(\\d+)';
      var img = sprites.match(regex)[1];
      img = 'https://staticpokeheroes.com/img/pokemon/bw_field/' + img + '.png';
      var color = 'red';
      for (var j = 0; j < correct.length; j++) {
        if (given[i] == correct[j]) {
         ...