JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<input type="text" id="input" value="ABC,abc,123,!!!" />
<input type="button" class="Go" value="go" />

<div id="UpperCase"></div>
<div id="LowerCase"></div>
<div id="Numbers"></div>
<div id="Symbols"></div>

CSS

#UpperCase img {border: 1px solid blue;}
#LowerCase img {border: 1px solid red;}
#Numbers img {border: 1px solid purple;}
#Symbols img {border: 1px solid goldenrod;}

JavaScript

// define a set of words for comparison
var blueWords = ["a", "b", "c"];

$(".Go").click(function() {
    // split the input value to get an array
    var words = $("#input").val().trim().split(",");
    var target;
    // loop over each item in the array
    for (i = 0; i < words.length; i++) {
        
         // ignore zero length words
        // (continue breaks execution of this iteration and moves on to the next)
        if (words[i].length === 0) continue; 
        
        target = null; // reset target
        
        if (words[i].match(/^[A-Z]+$/g)) // 1+ letters A-Z
        {
            target = $('#UpperCase');
        }
        else if (words[i].match(/^[a-z]+$/g)) // 1+ letters a-z
        {
            target = $('#LowerCase');
        }
        else if (words[i].match(/^[0-9]+$/g)) // 1+ numbers 0-9
        {
            target = $('#Numbers');
        }
        else if (words[i].match(/^[^\w]+$/g)) // not alphanumeric
        {
            target = $('#Symbols');
        }
        else
        {
            // decide what you want to do here if it doesn't match
            // eg: ABC123
        }
        
        // return a new img element for each word and 
        // append the element to the target
        target.append(function() {
            return $("<img/>").attr("src", words[i] + '.png');
        });
    }
});