Что даёт транслитерация в браузере
Когда редактор набирает заголовок, соседнее поле адреса заполняется само. Он сразу видит результат, может поправить его и не ждёт сохранения формы. Это удобно и снижает число ошибок в адресах.
Почему на клиента нельзя полагаться
- значение приходит из браузера, и его можно изменить вручную;
- скрипт может не выполниться или работать в старом браузере;
- правила клиента и сервера со временем расходятся.
Отсюда главный вывод: итоговое значение всегда проверяется и при необходимости перегенерируется на сервере.
Единый источник правил транслитерации
Опасно поддерживать две независимые реализации. Лучше вынести таблицу соответствия букв в общий файл, из которого её читают и браузерный скрипт, и серверный код, либо использовать серверную функцию через небольшой запрос из формы. Таблица должна соответствовать правилам Яндекса.
const map = { 'щ': 'shh', 'ы': 'y', 'ё': 'e', 'ъ': '' };
// эта же таблица используется и на сервереКлиентское значение как подсказка
Разумная схема: браузер предлагает вариант слага, пользователь может его отредактировать, а сервер нормализует, проверяет уникальность и сохраняет окончательный вариант. Так удобство сочетается с надёжностью.
Итоговая рекомендация
Вывод: транслитерацию в браузере используйте как удобный предпросмотр, а решение о финальном адресе оставляйте серверу.
Особенности работы со строками в браузере
Скрипты в браузере работают со строками в кодировке Unicode, и одинаковые на вид буквы могут иметь разное внутреннее представление, например «й» как одна буква или как сочетание двух символов. Перед транслитерацией такие строки приводят к единому виду, что подробно объясняется в статье про нормализацию Unicode.
- нормализуйте строку до замены букв;
- обрабатывайте регистр отдельно;
- предусмотрите поведение для незнакомых символов.
Удобство для редактора
Автоматически заполненное поле адреса не должно раздражать: если редактор уже вручную исправил значение, скрипт обязан перестать его перезаписывать. Иначе каждое изменение заголовка будет стирать правки. Заведите отметку «адрес изменён вручную» и прекращайте автоподстановку после первого редактирования.
Проверка клиентской реализации
Клиентский код транслитерации нужно тестировать так же, как серверный: на тех же контрольных заголовках, с теми же ожидаемыми значениями. Если результаты расходятся, значит, одна из реализаций отстала, и её нужно привести к общей таблице соответствия.
Частые вопросы
Можно ли выполнять транслитерацию только в браузере?
Нет, значение из браузера можно изменить или оно может прийти пустым, поэтому итоговый слаг проверяют и формируют на сервере.
Как избежать расхождений между клиентской и серверной транслитерацией?
Использовать общий источник таблицы соответствия букв либо получать вариант слага от серверной функции.
Зачем тогда нужна клиентская транслитерация?
Как удобный предпросмотр адреса в форме, который помогает редактору сразу увидеть и при необходимости поправить результат.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.