Современные движки имеют механизм транслитерации символьного кода из названия страницы. Как правило, эта фишка используется в формах добавления страниц, записей, и т.п. Для чего это нужно? Главным образом сгенерированный код используется для формирования 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.
а как отобразить результат не в инпуте, а в диве?
document.getElementById('yourDivID').innerHTML = 'html текст';
Огромное спасибо! Процветания!
есть переменная $text (из php) с текстом, как применить в вышеописанной транслитерации без ввода в окно input?
Хотел уточнить момент - делал так: var text = document.getElementById('name').innerHTML = (''); но видимо не верно, не понимается. Нужна помощь )))
Данный пример реализован на javascript. Если я правильно понял, то вам следует делать транслитерацию на стороне сервера, в PHP.
я почему-то думал, что можно вместо входящего инпута "вскормить" (транслитерацию по данному примеру) , но как это реализовать?
что-то типа такого (пхп) echo $text (пхп)
Запись:
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;
}
Спасибо за помощь, попробую реализовать.
Очень понравилос! скажите, а как использоват списки на select-option для транслитерации? делал select так - onchange="translit()" , но мне выдало то что внутри value="этот 12123 номер", а мне нужен текст которий между тегами нужен этот текст. Как реализоват? Буду признателен!
Вместо:
<input name="name" type="text" id="name" onKeyUp="translit()" />
Попробуй попробуй поставить это:
<select name="name" id="name" onchange="translit()">
<option value="первый">Первый</option>
<option value="второй">Второй</option>
</select>
function getSelectedText(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1) return null;
return elt.options[elt.selectedIndex].text;
}
var str = getSelectedText('name');
с этого варианта:
получил то, что есть внутри value = " 9152435 " > эти цифры 9152435 (в каждой строке они разный), они мне нужен, их менять нельзя.
Ваш код транслитерация его хорошо видит. А мне нужен текст отдать в транслитерация как у вашего примера (часть код):
value = " цифры не трогаю " > Первая текст строка её передаю в транслитерация< / option
и Второй строка, и так далее.
Как передать текст строка?
Можно попробовать в цикле перебрать каждый option элемента select, делать это удобнее с помощью Jquery.
Привет, вот все отлично, но не работает заглавные буквы?
Привет, проверь наличие строки:
str = str.toLowerCase();
- она должна переводить строку в нижний регистр
мне кажется код немного не доработан. У меня есть код на 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; // возвращаем результат }не корректно вставился 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; // возвращаем результат }Автор, привет и всем привет!
А как сделать несколько полей:
название - урл
название 2 - урл 2
и т.д.?
Заранее спасибо!