О web-разработке
и даже немного больше...

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

Современные движки имеют механизм транслитерации символьного кода из названия страницы. Как правило, эта фишка используется в формах добавления страниц, записей, и т.п. Для чего это нужно? Главным образом сгенерированный код используется для формирования URL страницы. Транслитерация нужна для преобразования символов русского алфавита в английский. Попробуем сделать подобное собственноручно.
Первым делом нам потребуется html форма, с которой мы будем работать посредством функции на javascript.

Форма:

<form name="form" method="post">
Название:<br>
<input name="name" type="text" id="name" onKeyUp="translit()" /><br>
Код для URL:<br>
<input name="code" type="text" id="code" />
</form>

Форма довольно проста, содержит два поля, первое поле с именем name, исходное поле, туда пишется название страницы. Второе поле с именем code, сюда будет выводиться результат транслитерации символов из поля name.
В поле name прописан обработчик события onKeyUp, который будет вызывать нашу функцию translit().

Код функции:

function translit() {
	var str = document.getElementById("name").value;
	var space = '-';
	var link = '';
	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'
	}
if (str != '')
	str = str.toLowerCase();

for (var i = 0; i < str.length; i++){
	if (/[а-яё]/.test(str.charAt(i))){ // заменяем символы на русском
		link += transl[str.charAt(i)];
	} else if (/[a-z0-9]/.test(str.charAt(i))){ // символы на анг. оставляем как есть
		link += str.charAt(i);
	} else {
		if (link.slice(-1) !== space) link += space; // прочие символы заменяем на space
	}
}
	document.getElementById("code").value = link;
}

Рабочий пример можно посмотреть тут.

UPD:
Как вы уже поняли данный пример реализован на javascript, это означает, что он выполняется на стороне клиента (браузера). Выполнить транслитерацию может так же потребоваться на стороне сервера, в нашем блоге появился пост, в котором есть примеры реализации транслитерации на PHP.

Опубликован: 16.05.2014 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. gela пишет:

    а как отобразить результат не в инпуте, а в диве?

    1. htmaker пишет:


      document.getElementById('yourDivID').innerHTML = 'html текст';

  2. gela пишет:

    Огромное спасибо! Процветания!

  3. Алексей пишет:

    есть переменная $text (из php) с текстом, как применить в вышеописанной транслитерации без ввода в окно input?

    1. Алексей пишет:

      Хотел уточнить момент - делал так: var text = document.getElementById('name').innerHTML = (''); но видимо не верно, не понимается. Нужна помощь )))

    2. htmaker пишет:

      Данный пример реализован на javascript. Если я правильно понял, то вам следует делать транслитерацию на стороне сервера, в PHP.

  4. Алексей пишет:

    я почему-то думал, что можно вместо входящего инпута "вскормить" (транслитерацию по данному примеру) , но как это реализовать?

    1. Алексей пишет:

      что-то типа такого (пхп) echo $text (пхп)

      1. htmaker пишет:

        Запись:
        var str = document.getElementById("name").value;
        Получает значение из поля ввода, заменив на
        var str = <?=$text?>
        Вы тем самым подставляете нужное вам значение.
        Остается вам только вызвать функцию не по событию onKeyUp="translit()", а самостоятельно translit().

        Вот пример функции на PHP:
        function transliterate($st) {
        $st = strtr($st,
        "абвгдежзийклмнопрстуфыэАБВГДЕЖЗИЙКЛМНОПРСТУФЫЭ",
        "abvgdegziyklmnoprstufieABVGDEGZIYKLMNOPRSTUFIE"
        );
        $st = strtr($st, array(
        'ё'=>"yo", 'х'=>"h", 'ц'=>"ts", 'ч'=>"ch", 'ш'=>"sh",
        'щ'=>"shch", 'ъ'=>'', 'ь'=>'', 'ю'=>"yu", 'я'=>"ya",
        'Ё'=>"Yo", 'Х'=>"H", 'Ц'=>"Ts", 'Ч'=>"Ch", 'Ш'=>"Sh",
        'Щ'=>"Shch", 'Ъ'=>'', 'Ь'=>'', 'Ю'=>"Yu", 'Я'=>"Ya",
        ));
        return $st;
        }

        1. Алексей пишет:

          Спасибо за помощь, попробую реализовать.

  5. Мартин пишет:

    Очень понравилос! скажите, а как использоват списки на select-option для транслитерации? делал select так - onchange="translit()" , но мне выдало то что внутри value="этот 12123 номер", а мне нужен текст которий между тегами нужен этот текст. Как реализоват? Буду признателен!

    1. htmaker пишет:

      Вместо:
      <input name="name" type="text" id="name" onKeyUp="translit()" />

      Попробуй попробуй поставить это:
      <select name="name" id="name" onchange="translit()">
      <option value="первый">Первый</option>
      <option value="второй">Второй</option>
      </select>

      1. htmaker пишет:

        function getSelectedText(elementId) {
        var elt = document.getElementById(elementId);
        if (elt.selectedIndex == -1) return null;
        return elt.options[elt.selectedIndex].text;
        }
        var str = getSelectedText('name');

      2. Мартин пишет:

        с этого варианта:

        получил то, что есть внутри value = " 9152435 " > эти цифры 9152435 (в каждой строке они разный), они мне нужен, их менять нельзя.

        Ваш код транслитерация его хорошо видит. А мне нужен текст отдать в транслитерация как у вашего примера (часть код):

        value = " цифры не трогаю " > Первая текст строка её передаю в транслитерация< / option

        и Второй строка, и так далее.

        Как передать текст строка?

        1. htmaker пишет:

          Можно попробовать в цикле перебрать каждый option элемента select, делать это удобнее с помощью Jquery.

  6. мока пишет:

    Привет, вот все отлично, но не работает заглавные буквы?

    1. htmaker пишет:

      Привет, проверь наличие строки:
      str = str.toLowerCase();
      - она должна переводить строку в нижний регистр

  7. Руслан пишет:

    мне кажется код немного не доработан. У меня есть код на php хочется тот же функционал на js

    'a','б'=>'b','в'=>'v','г'=>'g','д'=>'d','е'=>'e','ё'=>'e','ж'=>'j','з'=>'z','и'=>'i','й'=>'y','к'=>'k','л'=>'l','м'=>'m','н'=>'n','о'=>'o','п'=>'p','р'=>'r','с'=>'s','т'=>'t','у'=>'u','ф'=>'f','х'=>'h','ц'=>'c','ч'=>'ch','ш'=>'sh','щ'=>'shch','ы'=>'y','э'=>'e','ю'=>'yu','я'=>'ya','ъ'=>'','ь'=>''));
    $s = preg_replace("/[^0-9a-z-_ ]/i", "", $s); // очищаем строку от недопустимых символов
    $s = preg_replace("/\s+/", ' ', $s); // удаляем повторяющие пробелы
    $s = str_replace(" ", "-", $s); // заменяем пробелы нижним подчеркиванием
    return $s; // возвращаем результат
    }
    
  8. Руслан пишет:

    не корректно вставился php вот исправлено:

    function translit($s) {
    	$s = (string) $s; // преобразуем в строковое значение
    	$s = strip_tags($s); // убираем HTML-теги
    	$s = str_replace(array("\n", "\r"), " ", $s); // убираем перевод каретки
    	$s = trim($s); // убираем пробелы в начале и конце строки
    	$s = function_exists('mb_strtolower') ? mb_strtolower($s, 'UTF-8') : strtolower($s, 'UTF-8'); // переводим строку в нижний регистр (иногда надо задать локаль)
    	$s = strtr($s, array('а'=>'a','б'=>'b','в'=>'v','г'=>'g','д'=>'d','е'=>'e','ё'=>'e','ж'=>'j','з'=>'z','и'=>'i','й'=>'y','к'=>'k','л'=>'l','м'=>'m','н'=>'n','о'=>'o','п'=>'p','р'=>'r','с'=>'s','т'=>'t','у'=>'u','ф'=>'f','х'=>'h','ц'=>'c','ч'=>'ch','ш'=>'sh','щ'=>'shch','ы'=>'y','э'=>'e','ю'=>'yu','я'=>'ya','ъ'=>'','ь'=>''));
    	$s = preg_replace("/[^0-9a-z-_ ]/i", "", $s); // очищаем строку от недопустимых символов
    	$s = preg_replace("/\s+/", ' ', $s); // удаляем повторяющие пробелы
    	$s = str_replace(" ", "-", $s); // заменяем пробелы нижним подчеркиванием
    	return $s; // возвращаем результат
    }
    
  9. Максим пишет:

    Автор, привет и всем привет!
    А как сделать несколько полей:
    название - урл
    название 2 - урл 2
    и т.д.?
    Заранее спасибо!

Добавить комментарий для Мартин Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта