Транслит строки из кириллицы в латиницу на JavaScript

Задача: при вводе текста в одном текстовом поле ("Title") нужно выводить его транслитерованное значение в другом ("UserKey"), при этом в транслите допускаются только латинские буквы, цифры и тире.

Пример HTML с двумя полями:

1 2	`<input` `id="Title"` `name="Title"` `value=""` `type="text"` `/>` `<input` `id="UserKey"` `name="UserKey"` `value=""` `type="text"` `/>`

Для включения транслитерации добавим следующий javascript-код на страницу:

    function toTranslit(text) {
    return text.replace(/([а-яё])|([\s_-])|([^a-z\d])/gi,
    function (all, ch, space, words, i) {
        if (space || words) {
            return space ? '-' : '';
        }
        var code = ch.charCodeAt(0),
            index = code == 1025 || code == 1105 ? 0 :
                code > 1071 ? code - 1071 : code - 1039,
            t = ['yo', 'a', 'b', 'v', 'g', 'd', 'e', 'zh',
                'z', 'i', 'y', 'k', 'l', 'm', 'n', 'o', 'p',
                'r', 's', 't', 'u', 'f', 'h', 'c', 'ch', 'sh',
                'shch', '', 'y', '', 'e', 'yu', 'ya'
            ]; 
        return t[index];
    });
}

Данный код добавляет новый метод "translit" к строковым переменным. Теперь мы можем использовать его в коде текстовых полей:

<input id="Title"
onkeyup="javascript:document.getElementById('UserKey').value = toTranslit(this.value)"
name="Title" value="" type="text" />
<input id="UserKey" name="UserKey" value="" type="text" />

При вводе значения в поле Title, автоматически будет заполняться поле UserKey.

Пример внедрения скрипта на ASP страницу:

<script type="text/javascript">
 function toTranslit(text) {
        return text.replace(/([а-яё])|([\s_-])|([^a-z\d])/gi,
        function (all, ch, space, words, i) {
            if (space || words) {
                return space ? '-' : '';
            }
            var code = ch.charCodeAt(0),
                index = code == 1025 || code == 1105 ? 0 :
                    code > 1071 ? code - 1071 : code - 1039,
                t = ['yo', 'a', 'b', 'v', 'g', 'd', 'e', 'zh',
                    'z', 'i', 'y', 'k', 'l', 'm', 'n', 'o', 'p',
                    'r', 's', 't', 'u', 'f', 'h', 'c', 'ch', 'sh',
                    'shch', '', 'y', '', 'e', 'yu', 'ya'
                ]; 
            return t[index];
        });
    }
function SetTranslit(val) {
    document.getElementById('<%= tbxNewsURLKey.ClientID %>').value = toTranslit(val);
    }
</script>
 
 
<p>Заголовок:
<asp:TextBox ID="tbxTitle" runat="server" onkeyup="SetTranslit(this.value)">
</asp:TextBox>
 
<p>URL name:
<asp:TextBox ID="tbxNewsURLKey" runat="server"></asp:TextBox>

Транслит строки из кириллицы в латиницу на JavaScript

Похожие статьи