Replacing Input Text on Keyup and Display

by jme11

HTML

<body dir="rtl">
    <input type="text" id="input" />
    <div id="text"></div>
</body>

CSS

input {
    width: 100%;
    font-size: 2em;
    color: #ccc;
    margin-top: 10px;
}
#text {
    font-size: 2em;
    color: blue;
    margin-top: 20px;
}

JavaScript

var replacements = {ا: '\u05D0', ب: '\u05D1', ج: '\u05D2\u05F3', د: '\u05D3', ذ: '\u05D3\u05F3', ه: '\u05D4', و: '\u05D5', ز: '\u05D6', ح: '\u05D7', خ: '\u05D7\u05F3', ط: '\u05D8', ظ: '\u05D8\u05F3', ي: '\u05D9', ك: '\u05DB', ل: '\u05DC', م: '\u05DE', ن: '\u05E0', س: '\u05E1', ع: '\u05E2', ف: '\u05E4', ص: '\u05E6', ق: '\u05E7', ر: '\u05E8', ش: '\u05E9', ت: '\u05EA', ث: '\u05EA\u05F3', ض: '\u05E1\u05F3', ظ: '\u05D8\u05F3', غ: '\u05E8\u05F3', ﺀ: '\u05D0\u05F3'};

$('#input').keyup(function() {
	var input = $('#input').val();
	var txt = input.replace(/./g, function(char) {return char in replacements ? replacements[char] : char})
	$('#text').text(txt);
});