<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Thanks for looking at my source :). -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Convert Translit into Cyrillic and vice versa</title>
<!-- Disable IE security warning when opening from a local drive. -->
<!-- saved from url=(0014)about:internet -->
</head>
<body bgcolor="Teal" text="Yellow">
<script language="javascript" type="text/javascript">
//<!--
var lat=new Array("yu", "yo", "zh", "i'", "ch", "sh", "xh", "je", "ju", "ya","a", "b", "v", 
		"g", "d", "e", "z", "i", "k", "l", "m", "n", "o", "p", "r", "s", "t", 
		"u", "f", "x", "c", "'", "y", "`", "j", "h");
var cyr=new Array("ы", "ё",  "ж",  "й",  "ч",  "ш",  "щ",  "э",  "ю",  "я", "а", "б", "в", 
		"г", "д", "е", "з", "и", "к", "л", "м", "н", "о", "п", "р", "с", "т", 
		"у", "ф", "х", "ц", "ь", "ы", "ъ", "ж", "х");
var latcap=new Array("YU", "Yu", "YO", "Yo", "ZH", "Zh", "I'", "Ch", "CH", "Sh", "SH", 
		"Xh", "XH", "Je", "JE", "Ju", "JU", "Ya", "YA", "A", "B", "V", "G", 
		"D", "E", "Z", "I", "K", "L", "M", "N", "O", "P", "R", "S", "T", "U",
		"F", "X", "C", "Y", "J", "H");
var cyrcap=new Array("Ы", "Ы", "Ё",  "Ё",  "Ж",  "Ж",  "Й",  "Ч",  "Ч",  "Ш",  "Ш",
		"Щ",  "Щ", "Э", "Э", "Ю", "Ю", "Я", "Я", "А", "Б", "В", "Г", "Д", 
		"Е", "З", "И", "К", "Л", "М", "Н", "О", "П", "Р", "С", "Т", "У", 
		"Ф", "Х", "Ц", "Ы", "Ж", "Х");

var lat2=new Array("yu","yo","i'", "ch", "sh", "xh", "je", "ju", "ya","a", "b", "v", 
		"g", "d", "e", "z", "i", "k", "l", "m", "n", "o", "p", "r", "s", "t", 
		"u", "f", "c", "'", "y", "`", "j", "h");
var cyr2=new Array("ы", "ё", "й",  "ч",  "ш",  "щ",  "э",  "ю",  "я", "а", "б", "в", 
		"г", "д", "е", "з", "и", "к", "л", "м", "н", "о", "п", "р", "с", "т", 
		"у", "ф", "ц", "ь", "ы", "ъ", "ж", "х");
var latcap2=new Array("YU", "Yu", "YO", "Yo", "I'", "Ch", "CH", "Sh", "SH", "Xh", "XH",
		"Je", "JE", "Ju", "JU", "Ya", "YA", "A", "B", "V", "G", "D", "E", "Z",
		"I", "K", "L", "M", "N", "O", "P", "R", "S", "T", "U", "F", "C", 
		"Y", "J", "H");
var cyrcap2=new Array("Ы", "Ы", "Ё",  "Ё", "Й",  "Ч",  "Ч",  "Ш",  "Ш",  "Щ",  "Щ",
		"Э", "Э", "Ю", "Ю", "Я", "Я", "А", "Б", "В", "Г", "Д", "Е", "З", "И", 
		"К", "Л", "М", "Н", "О", "П", "Р", "С", "Т", "У", "Ф", "Ц", 
		"Ы", "Ж", "Х");

    window.onload = function () {
        document.getElementById("tran").onclick = function translate() {
           
            var tex = document.forms[0].text2.value;
            var buf = tex;
            var i;

            for (i = 0; i < latcap.length; i++) {
                buf = replace(buf, latcap[i], cyrcap[i], 1, 0);
            }
            for (i = 0; i < lat.length; i++) {
                buf = replace(buf, lat[i], cyr[i], 1, 0);
            }
			//console.log(tex + " is " + buf)
			document.forms[0].text2.value = buf;
        }
    }
	function translate(id) {
        var tex = document.getElementById(id).value;
		var buf=tex;
		var i;

		for (i=0;i<latcap.length;i++)  {
			buf=replace(buf,latcap[i],cyrcap[i],1,0);
		}
		for (i=0;i<lat.length;i++)     {
			buf=replace(buf,lat[i],cyr[i],1,0);
		}
        console.log(tex + " is " + buf)
		tex = buf;
		//document.getElementById(id).value = buf;
		//return tex;
	}

function translit(tex) {
	var buf=tex;
	var i;

	for (i=0;i<cyrcap.length;i++)  {
		buf=replace(buf, cyrcap2[i], latcap2[i], 1, 0);
	}
	for (i=0;i<cyr.length;i++)     {
		buf=replace(buf, cyr2[i], lat2[i], 1, 0);
	}
	tex=buf;
	return tex;
}

function replace(target,oldTerm,newTerm,caseSens,wordOnly) {
	var work = target;
	var ind = 0;
	var next = 0;

	if (!caseSens) {
		oldTerm = oldTerm.toLowerCase();
		work = target.toLowerCase();
	}

	while ((ind = work.indexOf(oldTerm,next)) >= 0) {
		if (wordOnly) {
			var before = ind - 1;
			var after = ind + oldTerm.length;
			if (!(space(work.charAt(before)) && space(work.charAt(after)))) {
				next = ind + oldTerm.length;
				continue;
			}
		}
		target = target.substring(0,ind) + newTerm + 
			 target.substring(ind+oldTerm.length,target.length);
		work = work.substring(0,ind) + newTerm + 
			work.substring(ind+oldTerm.length,work.length);
		next = ind + newTerm.length;
		if (next >= work.length) { break; }
	}
	return target;
}

	function test() {
        console.log(
            `'translate' name ${"translate" in globalThis ? "is" : "is not"
            } global. typeof translate is ${typeof translate}`,
		);
		translate(document.forms[0].text2.value, "test2");
	}
// -->
</script>

<center>
<h3>
Перевод с транслита
</h3>
<form>

<table border="0" cellspacing="0" cellpadding="4">
<tr>
<td><b>
А<br/>
Б<br/>
В<br/>
Г<br/>
Д<br/>
Е<br/>
Ё<br/>
Ж<br/>
З<br/>
И<br/>
Й<br/>
К<br/>
Л<br/>
М<br/>
Н<br/>
О<br/>
П<br/>
</b></td>
<td><b>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
</b></td>
<td><b>

A<br/>
B<br/>
V<br/>
G<br/>
D<br/>
E<br/>
YO<br/>
ZH,J&nbsp;<br/>
Z<br/>
I<br/>
I'<br/>
K<br/>
L<br/>
M<br/>
N<br/>
O<br/>
P<br/>
</b></td>

<td>

<textarea name=text2 cols=70 rows=25 wrap=nowrap>
</textarea><br/>

</td>
<td><b>
Р<br/>
С<br/>
Т<br/>
У<br/>
Ф<br/>
Х<br/>
Ц<br/>
Ч<br/>
Ш<br/>
Щ<br/>
ь<br/>
Ы<br/>
ъ<br/>
Э<br/>
Ю<br/>
Я<br/>
</b></td>
<td><b>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
</b></td>
<td><b>
R<br/>
S<br/>
T<br/>
U<br/>
F<br/>
X,H<br/>
C<br/>
CH<br/>
SH<br/>
XH<br/>
'<br/>
YU,Y<br/>
`<br/>
JE<br/>
JU<br/>
YA<br/>
</b></td>
</tr>

</table>

<input type="button" value="     Перевод     " id="tran" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="На транслит" onclick="document.forms[0].text2.value=translit(document.forms[0].text2.value);"/>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="Очистить" onclick="document.forms[0].text2.value='';"/>
</form>

</center>

</body>
</html>