Live typed pagename.

live-page-name.js

/**
 * Mapping 01
 *
 * Text manipulator for the set name. The set name must be compatible with Page name.
 *
 */
$(function () {

	/**
	 * Build valid/restricted filenames
	 *
	 */
	var textReplacements = (function () {

		var $inputs,
			i,
			strlen,
			name,
			value;

		// Pagename replacements
		function charReplace(name) {
			name = name.toLowerCase();
			value = '';
			for (i = 0; i < name.length; i++) {
				value += config.ProcessCsvImporter.replacements[name[i]] || name[i];
			}

			return value;
		}

		// Beautify
		function beautifier(name) {
			// replace all whitespace with dash
			name = name.replace(/\s+/g, '-')
			// replace all types of quotes with nothing
			name = name.replace(/['"\u0022\u0027\u00AB\u00BB\u2018\u2019\u201A\u201B\u201C\u201D\u201E\u201F\u2039\u203A\u300C\u300D\u300E\u300F\u301D\u301E\u301F\uFE41\uFE42\uFE43\uFE44\uFF02\uFF07\uFF62\uFF63]/g, '');
			// replace invalid with dash
			name = name.replace(/[^-_.a-z0-9 ]/g, '-');
			// convert whitespace to dash
			name = name.replace(/\s+/g, '-')
			// convert multiple dashes or dots to single
			name = name.replace(/--+/g, '-');
			// convert multiple dots to single
			name = name.replace(/\.\.+/g, '.');
			// remove ugly combinations next to each other
			name = name.replace(/(\.-|-\.)/g, '-');
			// remove dash in front
			name = name.replace(/^-/g, '');
			// make sure it's not too long (@adrian)
			if(name.length > 128) name = $.trim(name).substring(0, 128).split("-").slice(0, -1).join(" ");

			return name;
		}

		return {
			init: function ($el) {

				$input = $(".InputfieldName input");

				if (!$input.length) return false;

				$input.on('keypress change', function (e, el) {
					// When not selected (don't disable select all & delete all)
					if (this.selectionStart === this.selectionEnd) {
						// loops every character in string, little bit inefficient, but does do the thing
						this.value = charReplace(this.value);
						this.value = beautifier(this.value);
					}

					if (e.type === 'change') {
						this.value = this.value.replace(/(^[-_.]+|[-_.]+$)/g, '');
					}
				});
			}
		}
	}());

	textReplacements.init();
});