syncTranslit

Во многих веб проектах используются friendly urls. Например, вместо id статьи в url испольуется его текстовый идентификатор (slug). Обычно slug генерируется автоматически на серверной стороне при создании статьи. Но если вы хотите иметь возможность задавать slug самостоятельно (через форму) – можете использовать мой плагин syncTranslit.

Данный плагин рассчитан на украинскую и русскую аудиторию разработчиков.
Основная задача плагина: генерация slug из кирилличного текста. Плагин позволяет синхронизировать два поля на форме, при этом одно поле является источником данных (например, название статьи), а второе (slug) – принимает траслитерированный текст.

Использование

Подключаем файл плагина, вызываем метод syncTranslit для элемента-источника, передаем параметр destination – id элемента-приемника:

$(document).ready(<span style='color:#7f0055; font-weight:bold; '>function</span>(){
    $(<span style='color:#2a00ff; '>'#articleTitle'</span>).syncTranslit({destination: <span style='color:#2a00ff; '>'slug'</span>});
});

$(document).ready(function(){

$('#articleTitle').syncTranslit({destination: 'slug'});

});

Название:

Slug:

Возможные опции

Список доступных опций:

destination – id элемента-приемника
type – url (default) или raw: определяет тип транслитерации. url – для транслитерации в slug (заменяются спец. символы). raw используется для чистого преобразования (с сохранением всех спец. символов)
caseStyle – lower (default), normal, upper: отвечает за регистр транслитерируемых данных
urlSeparator – разделитель слов для slug (default: ‘-‘)

Пример с использованием других опций: транслитерация с преобразованием в верхний регистр и с использованием нижнего подчеркивания для разделения слов:

Название:

Slug:

$(document).ready(<span style='color:#7f0055; font-weight:bold; '>function</span>(){
  $(<span style='color:#2a00ff; '>'#articleTitle2'</span>).syncTranslit({
    destination: <span style='color:#2a00ff; '>'slug2'</span>,
    caseStyle: <span style='color:#2a00ff; '>'upper'</span>,
    urlSeparator: <span style='color:#2a00ff; '>'_'</span>
  });
});

$(document).ready(function(){

$('#articleTitle2').syncTranslit({

destination: 'slug2',

caseStyle: 'upper',

urlSeparator: '_'

});

Скачать плагин syncTranslit c Google Code
Страница проекта на сайте jQuery

Сказать спасибо можно на этот кошелек Z206432781821 🙂

Жду ваших предложений и замечаний в комментах

seelts

Отличная штука!
Спасибо.
Нижний регистр и подчёркивание – то, что надо.
Pingback: syncTranslit > Snowcore’s блог | My Web Development Bookmarks()
Smozjo

А если еще сделать ограничение чтобы во второй инпут нельзя было писать русские или другие символы, кроме английского языка?
Snowcore

Можно и такое сделать, реализую в следующей версии. Спасибо за совет.
an

Может быть не стоит игнорировать символ “_”, а разрешить его. Удалять только двойные
Snowcore

@an: в принципе, можно вынести в отдельную опцию (allowedCharacters, например)
Dmitriy.trt

Чтобы сделать плагин чуть более универсальным, советую сделать параметр destination так же jQuery-селектором, а не id
Snowcore

Согласен, уже есть в списке изменений для следующей версии 🙂
Smozjo

И когда же ждать следующую версию с доработками? : )
diz

при вставке из буфера обмена неплохо бы обрабатывать, а так же при выризании из исходного input
Рузин Василий

Отличная штука! Спасибо огромное!
Ща в свои проекты вставлю… )))
Рузин Василий

Надо бы сделать не только селектор на destination, но ещё и функцию, которая будет вызываться сразу после транслитерации (callBack).
Рузин Василий

Так же хочется функцию типа
syncTranslit({disable:true});
При вызове которой, транслитерация перестает работать. Это удобно когда есть галочка на которую жмешь, и она показывает включен транслит или нет.
gin

насколько я вижу – это транслитерация не на основе ГОСТ или ISO стандарта. Вообще хотелось узнать мнение автора по этому поводу – стоит ли заморачиваться со стандартами или нет.
По мне, так в этих стандартах Ъ и Ь совсем некошерно транслитерируются. То есть использование ‘ или ” в url нехорошо. А есть мнение что гуглу вообще по душе стандарт BGN.
Pingback: Живая транслитерация в админке()
XeNum

Переименуйте в функции $.fn.syncTranslit.transliterate параметр “char” – это слово нельзя использовать в параметрах.
Pingback: CakePHP, jQuery, CSS - заметки, записи и прочее()
Dima

А еще можно добавить параметр eventTranslate, событие, по которому осуществляется перевод.

Тогда $this.keyup(function() превратиться в $this.bind(o.eventTranslate, function()

И o.destination сделать не обязательно id.
Дичев

Отлично! Спасибо!
Ето все, що я искал. Мне надо только изменить Dictionaries, что използовать плъгин для другие язикам (Deutsch, Español, Português, Français, Türkçe, Polski, Български).

Еще раз болшое спасибо!

п.с. Пожалуйста, простите за плохой русский!
Здесь

Спасибо за этот плагин, прямо сейчас прикручу его для CMS, которую разрабатываю для курсовой работы в университете.
Василий Пупкин

Отличный плагин.
А можно в новой версии сделать необязательный параметр destination, а результат присваивать к переменной.
Дмитрий

Если кодировка страницы отличная от UTF-8 то работает только с цифрами и знаками.
Дмитрий

Не хватает возможности временно отключить транслитерацию. Возможно по какому-нибудь условию, к примеру, если 2й инпут в состоянии readOnly.
События keyup мало, нужно вешать сразу 3: “change propertychange input”.
А в общем не плохо. Спасибо!
Дмитрий

кавычки елочки не отрабатывает, например: такое «название»
а так отличное решение, спасибо!

Magento Developer's Blog

syncTranslit

Использование

Возможные опции

Roman Snitko