JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<div id="pre">MonkeysAreGreat</div>
<div id="post"></div>

JavaScript

classNameSubstitutions = {
			'A': '-a',
			'B': '-b',
			'C': '-c',
			'D': '-d',
			'E': '-e',
			'F': '-f',
			'G': '-g',
			'H': '-h',
			'I': '-i',
			'J': '-j',
			'K': '-k',
			'L': '-l',
			'M': '-m',
			'N': '-n',
			'O': '-o',
			'P': '-p',
			'Q': '-q',
			'R': '-r',
			'S': '-s',
			'T': '-t',
			'U': '-u',
			'V': '-v',
			'W': '-w',
			'X': '-x',
			'Y': '-y',
			'Z': '-z'
		};
function getCssClassName(value) {
    var first = value[0].toLowerCase(),
        rest = value.substring(1),
        result = '';
    for (var i = 0, z = rest.length; i < z; i++) {
        var char = rest[i],
            subs = classNameSubstitutions[char];
        if (subs && subs.length) {
            result += subs;
        } else {
            result += char;
        }
    }
    return first + result;
}
var val = document.getElementById('pre').innerText;
document.getElementById('post').innerText = getCssClassName(val);