Сучасні пакети мають механізм транслітерації символьного коду з назви сторінки. Як правило, ця фішка використовується у формах додавання сторінок, записів і т. п. Для чого це потрібно? Головним чином згенерований код використовується для формування URL сторінки. Транслітерація потрібна для перетворення символів російського алфавіту в англійський. Спробуємо зробити подібне власноруч.
Насамперед нам потрібно html форма, з якою ми будемо працювати допомогою функції javascript.
Форма:
Назва:
Код для URL:
Форма досить проста, містить два поля, перше поле з ім’ям 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,
‘s’: ‘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 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Коментарі
gela пише:10.11.2015 у 03:54
а як відобразити результат не инпуте, а в діві?
Відповісти
htmaker пише:10.11.2015 в 09:23
document.getElementById(‘yourDivID’).innerHTML = ‘html текст’;
Відповісти
gela пише:10.11.2015 в 13:52
Величезне спасибі! Процвітання!
Відповісти
Олексій пише:12.11.2015 у 03:19
є змінна $text (з php) з текстом, як застосувати в вищеописаною транслітерації без введення в вікно input?
Відповісти
Олексій пише:12.11.2015 у 19:06
Хотів уточнити момент — робив так: var text = document.getElementById(‘name’).innerHTML = (»); але мабуть не вірно, не розуміється. Потрібна допомога )))
Відповісти
htmaker пише:12.11.2015 в 19:45
Даний приклад реалізований на javascript. Якщо я правильно зрозумів, то вам слід робити транслітерацію на стороні сервера, в PHP.
Відповісти
Олексій пише:13.11.2015 у 16:46
я чомусь думав, що можна замість вхідного инпута «вигодувати» (транслітерацію з цього прикладу) , але як це реалізувати?
Відповісти
Олексій пише:13.11.2015 в 16:48
щось типу такого (пхп) echo $text (пхп)
Відповісти
htmaker пише:13.11.2015 у 16:57
Запис:
var str = document.getElementById(“name”).value;
Отримує значення з поля, замінивши на
var str =
Ви тим самим підставляєте потрібне вам значення.
Залишається вам тільки викликати функцію не за події 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;
}
Відповісти
Олексій пише:14.11.2015 у 05:19
Дякую за допомогу, спробую реалізувати.
Відповісти
Мартін пише:16.11.2015 в 17:20
Дуже понравилос! скажіть, а як використ списки на select-option для транслітерації? робив select так — onchange=»translit()» , але мені видало те що всередині value=»цей 12123 номер», а мені потрібен текст як між тегами потрібен цей текст. Як реализоват? Буду вдячний!
Відповісти
htmaker пише:16.11.2015 в 23:15
Замість:
Спробуй спробуй поставити це:
Перший
Другий
Відповісти
htmaker пише:16.11.2015 в 23:20
function getSelectedText(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1) return null;
return elt.options[elt.selectedIndex].text;
}
var str = getSelectedText(‘name’);
Відповісти
Мартін пише:17.11.2015 у 02:51
з цього варіанту:
отримав те, що є всередині value = » 9152435 » > ці цифри 9152435 (у кожному рядку вони різний), вони мені потрібен, їх міняти не можна.
Ваш код транслітерація його добре бачить. А мені потрібен текст віддати в транслітерація як у вашого прикладу (частина код):
value = » цифри не чіпаю » > Перша текст рядок її передаю в транслітерація< / option
і Другий рядок, і так далі.
Як передати текст рядок?
Відповісти
htmaker пише:17.11.2015 в 08:44
Можна спробувати в циклі перебрати кожен option елемента select, робити це зручніше за допомогою Jquery.
Відповісти
мока пише:29.10.2017 в 00:59
Привіт, ось все відмінно, але не працює заголовні літери?
Відповісти
htmaker пише:01.11.2017 в 19:14
Привіт, перевір наявність рядки:
str = str.toLowerCase();
— вона повинна переводити рядок у нижній регістр
Відповісти
