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


02.08.2012 || Раздел: || ASP.Net || JavaScript


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

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

<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>

 

©Элла (Автор: Ella Sea)

< Предыдущая статья

Пошаговая инструкция по переносу содержимого KooBoo с XML на SQL Server 2008 R2

Следующая статья >

Общие понятия и термины, необходимые при работе с Kooboo CMS