JSFiddle - React, Tailwind, and code Playground

HTML

<textarea rows=20 cols=60 oninput="f()" id="t">!.@
!:+.@
41-.@
4.#A9H</textarea><br/>
Left: <span id="l"></span><br/>
Wildcards (<span id="w"></span>/<span id="m"></span>): <span id="n"></span>

CSS

#l,#n{font-family:monospace;background:#ccc;white-space:pre}

JavaScript

(f=function(e){var e=document.querySelector("#t").value,m=(e.split("\n").length)>>1,i,c,w="",l=Array.from(" !!!!!#$$%&())))*+...1449:=@@@AHILOQQQTTZ\\^`````````eefmpxy{||||~~~~~~~~~");for(c of e.replace(/\n/g,""))~(i=l.indexOf(c))?l.splice(i,1):w+=c;document.querySelector("#w").innerHTML=w.length;document.querySelector("#m").innerHTML=m;document.querySelector("#l").innerHTML=l.join("");document.querySelector("#n").innerHTML=w;})()