Convert title to slug

convert-title-to-slug-php-js.md

Content:

• PHP: Convert title to slug
• JS: Convert title to slug
• Bind converting to slug to input changes

PHP: Convert title to slug

<?php
function slug( $text )
	{
		$trans = [
			'а' => 'a', 'б' => 'b', 'в' => 'v', 'г' => 'g', 'д' => 'd', 'е' => 'e', 'ё' => 'jo', 'ж' => 'zh', 'з' => 'z', 'и' => 'i', 'й' => 'jj',
			'к' => 'k', 'л' => 'l', 'м' => 'm', 'н' => 'n', 'о' => 'o', 'п' => 'p', 'р' => 'r', 'с' => 's', 'т' => 't', 'у' => 'u', 'ф' => 'f',
			'х' => 'kh', 'ц' => 'c', 'ч' => 'ch', 'ш' => 'sh', 'щ' => 'shh', 'ъ' => '', 'ы' => 'y', 'ь' => '', 'э' => 'eh', 'ю' => 'ju', 'я' => 'ja',
		];
		$text  = mb_strtolower( $text, 'UTF-8' ); // lowercase cyrillic letters too
		$text  = strtr( $text, $trans ); // transliterate cyrillic letters
		$text  = preg_replace( '/[^A-Za-z0-9 _.]/', '', $text );
		$text  = preg_replace( '/[ _.]+/', '-', trim( $text ) );
		$text  = trim( $text, '-' );
		return $text;
	}

JS: Convert title to slug

PHP strtr function alternative in JavaScript. We add this function as part of jQuery.

jQuery.strtr=function(str, from, to)
{
	var fr='', i=0, j=0, lenStr=0, lenFrom=0, tmpStrictForIn=false, fromTypeStr='', toTypeStr='', istr='';
	var tmpFrom=[];
	var tmpTo=[];
	var ret='';
	var match=false;

	// Received replace_pairs?
	// Convert to normal from->to chars
	if(typeof from==='object')
	{
		for(fr in from)
			if(from.hasOwnProperty(fr))
			{
				tmpFrom.push(fr);
				tmpTo.push(from[fr]);
			}

		from=tmpFrom;
		to=tmpTo;
	}

	// Walk through subject and replace chars when needed
	lenStr=str.length;
	lenFrom=from.length;
	fromTypeStr=typeof from==='string';
	toTypeStr=typeof to==='string';

	for(i=0; i<lenStr; i++)
	{
		match=false;
		if(fromTypeStr)
		{
			istr=str.charAt(i);
			for(j=0; j<lenFrom; j++)
				if(istr==from.charAt(j))
				{
					match=true;
					break;
				}
		}
		else
			for(j=0; j<lenFrom; j++)
				if(str.substr(i, from[j].length)==from[j])
				{
					match=true;
					// Fast forward
					i=(i+from[j].length)-1;
					break;
				}
		if(match) ret+=toTypeStr ? to.charAt(j) : to[j];
		else ret+=str.charAt(i);
	}

	return ret;
}

Actual function to convert text into slug. Again we impelement it as jQuery's method.

jQuery.toSlug=function(text)
{
	var trans={
		'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'jo', 'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'jj',
		'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f',
		'х': 'kh', 'ц': 'c', 'ч': 'ch', 'ш': 'sh', 'щ': 'shh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'eh', 'ю': 'ju', 'я': 'ja'
	};
	return jQuery.strtr(text.toLowerCase(), trans) // transliterate cyrillic letters
		.replace(/[^A-Za-z0-9 _.]/g, '') // leave only known characters 
		.replace(/[ _\.]+/g, '-') // convert 'space', '_', '.' into '-'
		.replace(/^-|-$/gm, ''); // remove '-' from start and end of the text
}

Usage example:

$.toSlug("Hello world ... фыва ФЫВА привет_done   123.345  Транслитерация русского алфавита----латиницей >>> ...   \n")

Output:

hello-world-fyva-fyva-privet-done-123-345-transliteracija-russkogo-alfavitalatinicejj

Bind converting to slug to input changes

jQuery(document).ready(function($)
{
	// on change convert input value to slug
	$('[data-slugger=1][data-target]').on('change', function()
	{
		$($(this).data('target')).val($.toSlug($(this).val()));
	});
});

In view we should put inputs with data-slugger=1 and data-target='#Model_attr' attributes

	<?php $form = $this->beginWidget( 'CActiveForm', [
		'id'                   => 'news-form',
		'enableAjaxValidation' => false,
		'htmlOptions'          => [
			'class' => 'form-horizontal',
			'role'  => 'form',
		],
	] ); ?>

	<?= $form->errorSummary( $model, null, null, [ 'class' => 'alert alert-danger' ] ); ?>

	<div class="form-group">
		<div class="col-sm-12">
			<?= $form->label( $model, 'title' ); ?>
			<?= $form->textField( $model, 'title', [ 'class' => 'form-control', 'data-slugger' => '1', 'data-target' => '#' . CHtml::activeId( $model, 'slug' ), ] ); ?>
			<?= $form->error( $model, 'title', [ 'class' => 'text-danger' ] ); ?>
		</div>
	</div>

	<div class="form-group">
		<div class="col-sm-12">
			<?= $form->label( $model, 'slug' ); ?>
			<?= $form->textField( $model, 'slug', [ 'class' => 'form-control', ] ); ?>
			<?= $form->error( $model, 'slug', [ 'class' => 'text-danger' ] ); ?>
		</div>
	</div>

	<?php $this->endWidget(); ?>