maximepihin,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div {
width: 28px;
height: 28px;
text-align: center;
display: inline-block;
}
</style>
<script>
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#f1c40f", "#e67e22", "#e74c3c"],
letters = ["a", "b", "c", "d", "e", "1", "2", "3"],
obj = Array.prototype.reduce.call(letters, fn, {}),
message;
function fn(obj, el, i) {
obj[el] = colors[i];
return obj
}
function create(el) {
var text = document.createTextNode(el);
if (obj[el]) {
var div = document.createElement("div");
div.style.backgroundColor = obj[el];
div.appendChild(text);
text = div
}
document.body.appendChild(text);
return text
}
function init() {
message = document.getElementById("sinput").value.split("");
message.map(create)
}
window.onload = init;
</script>
</head>
<body>
<input type="text" value="911abctestde" id="sinput">
</body>
</html>