This is a way to mindlessly type in text to receive it an url in seo-friendly format.

It is also a good lesson on how jQuery can instantly return text and the use of simple regex.

demo:

javascript:

function seoFriendlyReplace(orginal, seoFriendlyElement, edit) {
	$(orginal).keyup(function() {

            var orginalString = $(orginal).val();
			// this regex is saying "do not look at "a" to "z" and "0" to "9" and "-" and whitespace across the board.
            var disallowedCharacters = /[^a-z0-9\-\s]+/gi;
			// exactly as the variable says. this is just whitespace across the board. "\s" is white space in regex
            var whitespace = /[\s]+/g;
            // Filtering through illegal characters such as "&" symbol needs to be "and" and we need to lower the case of the characters too
            var seoFriendlyString = orginalString.replace(/&/g, 'and').replace(disallowedCharacters, '').replace(whitespace, '-').toLowerCase();
			// using the jQ trim regex filter method we are making sure there isn't white space in the front and back the end of the string.
			seoFriendlyString = $.trim(seoFriendlyString);
			// although not full proof it is dumb proof. if you enter in a "-" in the beginning it will remove it but for now if the user does a "--" then I can't prevent them from doing it with this solution.
			if (seoFriendlyString.indexOf("-") == 0) {
				seoFriendlyString = seoFriendlyString.slice(1, seoFriendlyString.length);
			}
			// time to write it and call the change function to update the seo friendly text box.
            $(seoFriendlyElement).val(seoFriendlyString);
            })
            .change();
			// this is for usability - to allow the user to edit the seo url. we are also changing the style of the text to seem "disabled" and we are changing the text to describe the action
            $(edit).toggle(
                function(){
                    $(this).text("lock")
                    $(seoFriendlyElement).attr("readonly", "").attr("class", "editable");
                },
                function(){
                    $(this).text("edit")
                    $(seoFriendlyElement).attr("readonly", "readonly").attr("class", "not_editable");
                }					

            )

}