Отправка сообщения






Добро пожаловать!

Транслитерация на 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.

Добавил: htmaker, 16.05.2014 г.
 
плохослабосойдетхорошоотлично (Еще не оценили)
Загрузка...

Комментарии

  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.

Добавить комментарий

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

Комментарии

  • Загрузка...

Наверх