JSFiddle - React, Tailwind, and code Playground

by jfriend00

CSS

dt {width: 300px; float: left;}
.bad {color: red;}

JavaScript

var str = "foo;";

// 0-47 : 00-2F : control codes, spaces, punctuation
// 58-64 : 3A-40 : more punctuation
// 91-96 : 5B-60
// 123-127 : 7B-7F

function verifyChars(str) {
    return(str.match(/^[^\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+$/) != null);
}

var testWords = [
    "foo",
    "foo bar",
    "foo+",
    "foo1",
    "foo:",
    "foo@",
    "abcdefghijklmnopqrstuvwxyz",
    "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    "foo[]",
    "foo{}"
];

var results = [];
var match;
var cls;
for (var i = 0; i < testWords.length; i++) {
    match = verifyChars(testWords[i]);
    cls = match ? "good" : "bad";
    results.push("<dt class='" + cls + "'>" + testWords[i] + "</dt><dd class='" + cls + "'>" + match + "</dd>");    
}

document.body.innerHTML = "<dl>" + results.join("") + "</dl>";