Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JavaScript / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Транслитерация строки на JavaScript

Всем привет! Недавно при написании CMS системы столкнулся с задачей транслитерации строки для создания красивых url на будущем сайте. Согласитесь, что не каждый захочет вручную вбивать адрес страницы транслитом. Да и к тому же поначалу это может доставлять некоторые проблемы, нужно привыкать к этому. Поэтому я решил поискать javasript, который выполнял эту работу. Нашел несколько рабочих скриптов, но  они не полностью устроили меня, так выполняли не все мои требования. Поэтому я решил доработать их для своих нужд и поделиться с вами.

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

Начну с требований, который я поставил:

  • Результат должен быть в нижнем регистре не зависимо от регистра вводимых символов;
  • Все пробелы и спецсимволы должны заменятся на тире «-», можно изменить на нижнее подчеркивание «_»;
  • Если подряд вводится несколько пробелов или спецсимволов, которые я буду заменять на «-», они не должны повторятся (например, такого не должно быть: nashi---raboty);
  • Если при вводе название первый и последний символ нужно преобразовать в «-» это не должно выводиться в результат (например, такого не должно быть: -contact-);

Итак, подключим jquery и создадим простую форму с двумя полями:

<form id="form" name="form" method="post" action="#">         
    Введите название страницы:<br>
    <input
name="name" type="text" id="name" /><br>
    URL страницы:<br>
    <input
name="alias" type="text" id="alias" />
</form>

Если вы совсем не хотите подключать jquery, то можно обойтись и без него. Дальше я покажу, как это сделать. Далее пойдет сам скрипт:

function translit(){
// Символ, на который будут заменяться все спецсимволы
var space = '-';
// Берем значение из нужного поля и переводим в нижний регистр
var text = $('#name').val().toLowerCase();
    
// Массив для транслитерации
var transl = {
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'e', 'ж': 'zh',
'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
'о': 'o', 'п': 'p', 'р': 'r','с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h',
'ц': 'c', 'ч': 'ch', 'ш': 'sh', 'щ': 'sh','ъ': space, 'ы': 'y', 'ь': space, 'э': 'e', 'ю': 'yu', 'я': 'ya',
' ': space, '_': space, '`': space, '~': space, '!': space, '@': space,
'#': space, '$': space, '%': space, '^': space, '&': space, '*': space,
'(': space, ')': space,'-': space, '\=': space, '+': space, '[': space,
']': space, '\\': space, '|': space, '/': space,'.': space, ',': space,
'{': space, '}': space, '\'': space, '"': space, ';': space, ':': space,
'?': space, '<': space, '>': space, '№':space
}
               
var result = '';
var curent_sim = '';
               
for(i=0; i < text.length; i++) {
    // Если символ найден в массиве то меняем его
    if(transl[text[i]] != undefined) {
         if(curent_sim != transl[text[i]] || curent_sim != space){
             result += transl[text[i]];
             curent_sim = transl[text[i]];
                                                        }                                                                            
    }
    // Если нет, то оставляем так как есть
    else {
        result += text[i];
        curent_sim = text[i];
    }                             
}         
               
result = TrimStr(result);              
               
// Выводим результат
$('#alias').val(result);
   
}
function TrimStr(s) {
    s = s.replace(/^-/, '');
    return s.replace(/-$/, '');
}
// Выполняем транслитерацию при вводе текста в поле
$(function(){
    $('#name').keyup(function(){
         translit();
         return false;
    });
});

Итак, давайте его разберем. Имеется функция translit(), которая будет выполняться при введение символов в строку.

space - это то, на что мы будем менять пробелы и спецсимволы, в данном примере это тире.

text - данные из строки name и уже в нижнем регистре.

transl – это массив для транслитерации русских букв и замены спецсимволов (вроде все указал, но возможно, что то и упустил).

result – строка, с будущим результатом.

curent_sim – текущий символ при замене. Данная переменная нужна, что бы избежать повторений при замене пробелов и спецсимволов, о чем говорилось в требованиях выше.

Теперь в цикле мы перебираем строку по символам, и если требуется, то производим замену. Практически результат готов, но нужно выполнит еще одно требование: обрезать тире в начале и конце полученной строки, если они конечно есть. Сделаем мы это при помощи небольшой функции TrimStr. Вот теперь все, готовый результат можно выводить на экран.

Теперь поговорим о том, как это реализовать, если вы не захотели подключать jquery. Все решается довольно просто. Мы заменяем строки

var text = $('#name').val().toLowerCase();

на

var text = document.getElementById('name').value.toLowerCase();

и строку

$('#alias').val(result);

На

document.getElementById('alias').value = result;

так же удалим код после комментария «Выполняем транслитерацию при вводе текста в поле»
И внесем некоторые изменения в основной документ:
В строке

<input name="name" type="text" id="name" />

Допишем свойство, отслеживающее нажатие кнопок на клавиатуре

<input name="name" type="text" id="name" onkeyup="translit()" />

Теперь точно все. И не забываем, что данный скрипт предназначен для облегчения ввода данных пользователю, поэтому нужно позаботиться о проверке данных на стороне сервера.

Автор: Евгений Бочкарев Урок добавлен: 08 Сентября 2013 в 20:17 Просмотров: 18411

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (8)

#9 Виталий 27-05-2015 в 17:43
Спасибо автору! Очень полезно!
#10 Алексей 07-10-2015 в 13:29
Что скажите по урокам Дмитрия Охрименко ? - http://itvdn.com/ru/video/javascript-essential
А то хочу сайт-визитку сделать, а с CMS-ками возится не вижу смысла.
#11 gelo 28-10-2015 в 17:29
Здорово! А как сделать чтобы к получившемуся результату добавлялось расширение .php, другими словами превращать это в ссылку на пхп?
#12 gelo 12-11-2015 в 00:36
разобрался ))) добавил +php . Но может кто подскажет как обойтись без ввода текста в инпут, к примеру есть переменная $text в пхп ? очень надо
#13 Евгений 12-11-2015 в 08:47
Можно просто в обработчике дописывать $text.'.php', но в инпуте будет не видно расширение в таком случае. Можно в translit.js дописать $('#alias').val(result+'.php');
#14 gelo 12-11-2015 в 11:19
с выводом догадался, получилось, Спасибо. Не сочтите за наглость, как сделать - есть переменная полученная в пхп $text , вот надо чтобы текст брался из неё без "входящего" инпута? Никак не могу ее пристрогать...
#15 Дмитрий 31-05-2016 в 13:37
Евгений, спасибо!
#16 Станислва 02-06-2016 в 13:14
Спасибо огромное, а есть ли возможно проверить комбинирование символов, например: Дe=d
#17 Алексей Кулагин 09-06-2016 в 09:46
Отлично! Кратенько, и именно те требования, которые нужны мне.
#18 иван 03-01-2017 в 00:26
Подскажите, а как сделать чтобы транслит работал из 2-х полей например name1 и name2 и добавлялось все в один alias
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки