Функция транслита в javascript код, пример.

19.09.2023 Марат 49 0 js

"Транслит js" функция, пример использования транслитерации в javascript.

Транслитерация на лету с возвратом транслитированного текста обратно в input.

Функция транслита в javascript код, пример.

Функция транслита в javascript.
Использование функции транслита в javascript.
Транслитерация на лету в input js.
Код транслитерации на лету в input js.
Пример транслитерации на лету в input js.

Функция транслита в javascript

Интернет кишит множеством вариантов функции транслита/транслитерации, поэтому... глупо терять время на написании собственной функции транслита, поскольку уже за вас её написали!


<script>
function transliterate(word)
{
   var answer = "";
   var a = {};

   a["Ё"]="YO";a["Й"]="I";a["Ц"]="TS";a["У"]="U";
   a["К"]="K";a["Е"]="E";a["Н"]="N";a["Г"]="G";a["Ш"]="SH";
   a["Щ"]="SCH";a["З"]="Z";a["Х"]="H";a["Ъ"]="'";
   a["ё"]="yo";a["й"]="i";a["ц"]="ts";a["у"]="u";
   a["к"]="k";a["е"]="e";a["н"]="n";a["г"]="g";
   a["ш"]="sh";a["щ"]="sch";a["з"]="z";a["х"]="h";a["ъ"]="'";
   a["Ф"]="F";a["Ы"]="I";a["В"]="V";a["А"]="a";a["П"]="P";
   a["Р"]="R";a["О"]="O";a["Л"]="L";a["Д"]="D";a["Ж"]="ZH";a["Э"]="E";
   a["ф"]="f";a["ы"]="i";a["в"]="v";a["а"]="a";a["п"]="p";
   a["р"]="r";a["о"]="o";a["л"]="l";a["д"]="d";a["ж"]="zh";a["э"]="e";
   a["Я"]="Ya";a["Ч"]="CH";a["С"]="S";a["М"]="M";a["И"]="I";
   a["Т"]="T";a["Ь"]="'";a["Б"]="B";a["Ю"]="YU";
   a["я"]="ya";a["ч"]="ch";a["с"]="s";a["м"]="m";a["и"]="i";
   a["т"]="t";a["ь"]="'";a["б"]="b";a["ю"]="yu";
   
   for (i = 0; i < word.length; ++i)
   {
       answer += a[word[i]] === undefined ? word[i] : a[word[i]];
   }
   return answer;
}
</script>

Использование функции транслита в javascript

Теперь давайте разберем пример использования функции транслита.. для этого вам понадобится:

Для этого вам понадобится:

Какой-то элемент, пусть это будет div с текстом "Привет мир!", в него помещаем id для того, чтобы обратиться к тегу.

<div id=iddiv>Привет мир!</div>

И второй div, куда будем отправлять результат работы функции транслита:

javascript

Переходим к javascript... получаем текст из div с помощью innerHTMLи пропускаем через функцию транслита:

transliterate(iddiv. innerHTML)

И с помощью того же транслитированный текст отправляем в пустой div:

id_div. innerHTML = transliterate(iddiv. innerHTML);

Соберем весь код примера транслитерации текста:

Код примера транслита текста javascript.


		Html:
<div id=iddiv>Привет мир!</div>
<div id=id_div></div>
		javascript
<script>
//здесь функция транслита, что была выше...
id_div. innerHTML = transliterate(iddiv. innerHTML);
</script>

И выводим данный код прямо здесь:

Привет мир!

Транслитерация на лету в input js

Следующий пункт - это "Транслитерация на лету в input js"... для этого вам понадобится:

Выше приведенная функция транслитерации в javascript.

Тег input с id, чтобы обратиться к тегу? тип используем text

Процесс транслитерации на лету js/

Далее вам потребуется получить данные из input используем событие keydown для получения текущего состояния в value.

Транслитировать вводимые данные и отправить их назад в поле input:

transliteratsia. value = transliterate(transliteratsia. value ) ;

Напоминаю!

Что получение из value будет с задержкой в 1 символ -> здесь идет речь о paste, но и с другими событиями(в нашем случае keydown) ситуация аналогичная... поэтому потребуется задержка setTimeout достаточно 1 тысячной секунды...


		transliteratsia.addEventListener("keydown", (event) =>
		  {
		    setTimeout(function()
		    { 
		      transliteratsia. value = transliterate(transliteratsia. value )  ;
		    }, 1);
		  }
		);

Код транслитерации на лету в input js.

Соберем весь код "транслитерации на лету в input js":


		Html:
<input id="transliteratsia" type="text">
		javascript:
<script>
function transliterate(word)
{
   var answer = "";
   var a = {};

   a["Ё"]="YO";a["Й"]="I";a["Ц"]="TS";a["У"]="U";
   a["К"]="K";a["Е"]="E";a["Н"]="N";a["Г"]="G";a["Ш"]="SH";
   a["Щ"]="SCH";a["З"]="Z";a["Х"]="H";a["Ъ"]="'";
   a["ё"]="yo";a["й"]="i";a["ц"]="ts";a["у"]="u";
   a["к"]="k";a["е"]="e";a["н"]="n";a["г"]="g";
   a["ш"]="sh";a["щ"]="sch";a["з"]="z";a["х"]="h";a["ъ"]="'";
   a["Ф"]="F";a["Ы"]="I";a["В"]="V";a["А"]="a";a["П"]="P";
   a["Р"]="R";a["О"]="O";a["Л"]="L";a["Д"]="D";a["Ж"]="ZH";a["Э"]="E";
   a["ф"]="f";a["ы"]="i";a["в"]="v";a["а"]="a";a["п"]="p";
   a["р"]="r";a["о"]="o";a["л"]="l";a["д"]="d";a["ж"]="zh";a["э"]="e";
   a["Я"]="Ya";a["Ч"]="CH";a["С"]="S";a["М"]="M";a["И"]="I";
   a["Т"]="T";a["Ь"]="'";a["Б"]="B";a["Ю"]="YU";
   a["я"]="ya";a["ч"]="ch";a["с"]="s";a["м"]="m";a["и"]="i";
   a["т"]="t";a["ь"]="'";a["б"]="b";a["ю"]="yu";
   
   for (i = 0; i < word.length; ++i)
   {
       answer += a[word[i]] === undefined ? word[i] : a[word[i]];
   }
   return answer;
}

transliteratsia.addEventListener("keydown", (event) => 
  {
    setTimeout(function()
    { 
      transliteratsia. value = transliterate(transliteratsia. value )  ;
    }, 1);
  }
);
</script>

Пример транслитерации на лету в input js.

Далее поместим весь "код транслитерации на лету в input js" и получим - "пример транслитерации на лету в input js", который вы можете протестировать :

Теги:

транслит js

функция транслита js

транслитерация js

транслитерация javascript

транслит javascript

js транслитерация с русского на английский