Greetings!
A tidbit found by a friend of mine online, forming the basis for a small piece of work I’ve done this week surrounding name capitalisation. This was pulled from a stack overflow article so credit where credit is due for starters:
This is fairly robust, covering Mc, Mac, O’s and double-barrelled, hyphenated names. It does capitalise the first character directly after an apostrophe (regardless of placement) which may or may not be a problem. As for usage, I went with the following setup (with the relevant JavaScript and jQuery hooks being properly abstracted in the production code of course).
Firstly, the example HTML structure:
<div id="container"> <!--An example form illustrating the fixNameCasing function being called on a test forename, middle names and surname field (when focus is lost)--> <form action="/" method="post"> <div> <label id="forename-txt-label">Forename:</label> </div> <div> <input id="forename-text" name="forename-text" class="control-top-margin fix-name-casing" type="text" /> </div> <div> <label id="middlename-text-label">Middle names:</label> </div> <div> <input id="middlename-text" name="middlename-text" class="control-top-margin fix-name-casing" type="text" /> </div> <div> <label id="surname-text-label">Surname:</label> </div> <div> <input id="surname-text" name="surname-text" class="control-top-margin fix-name-casing" type="text" /> </div> <div> <button id="submit-button" type="submit" class="control-top-margin">Submit</button> </div> </form> </div>
Then, our jQuery/JavaScript juicy bits:
<!--Bring jQuery into scope so we can hook up a function to relevant elements on 'blur' event (lost focus)-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
// The name casing fix function utilising regex
function fixNameCasing(name) {
var replacer = function (whole, prefix, word) {
ret = [];
if (prefix) {
ret.push(prefix.charAt(0).toUpperCase());
ret.push(prefix.substr(1).toLowerCase());
}
ret.push(word.charAt(0).toUpperCase());
ret.push(word.substr(1).toLowerCase());
return ret.join('');
}
var pattern = /\b(ma?c)?([a-z]+)/ig;
return name.replace(pattern, replacer);
}
// On document ready rig up of relevant controls (based upon using the 'fix-name-casing' class) 'blur' event. When focus is lost, in a given control, we take the controls input and format it based on a return value from fixNameCasing
$(function() {
$(".fix-name-casing").blur(function() {
$(this).val(fixNameCasing($(this).val()));
});
});
</script>
The results! Each field in the following screenshot received fully lowercase or uppercase input before being tabbed out of (i.e. lost focus):
Lastly, here’s the entire code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Name Capitalisation Test</title>
<style type="text/css">
.control-top-margin {
margin-top: 5px;
}
</style>
<!--Bring jQuery into scope so we can hook up a function to relevant elements on 'blur' event (lost focus)-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
// The name casing fix function utilising regex
function fixNameCasing(name) {
var replacer = function (whole, prefix, word) {
ret = [];
if (prefix) {
ret.push(prefix.charAt(0).toUpperCase());
ret.push(prefix.substr(1).toLowerCase());
}
ret.push(word.charAt(0).toUpperCase());
ret.push(word.substr(1).toLowerCase());
return ret.join('');
}
var pattern = /\b(ma?c)?([a-z]+)/ig;
return name.replace(pattern, replacer);
}
// On document ready rig up of relevant controls (based upon using the 'fix-name-casing' class) 'blur' event. When focus is lost, in a given control, we take the controls input and format it based on a return value from fixNameCasing
$(function() {
$(".fix-name-casing").blur(function() {
$(this).val(fixNameCasing($(this).val()));
});
});
</script>
</head>
<body>
<div id="container">
<!--An example form illustrating the fixNameCasing function being called on a test forename, middle names and surname field (when focus is lost)-->
<form action="/" method="post">
<div>
<label id="forename-txt-label">Forename:</label>
</div>
<div>
<input id="forename-text" name="forename-text" class="control-top-margin fix-name-casing" type="text" />
</div>
<div>
<label id="middlename-text-label">Middle names:</label>
</div>
<div>
<input id="middlename-text" name="middlename-text" class="control-top-margin fix-name-casing" type="text" />
</div>
<div>
<label id="surname-text-label">Surname:</label>
</div>
<div>
<input id="surname-text" name="surname-text" class="control-top-margin fix-name-casing" type="text" />
</div>
<div>
<button id="submit-button" type="submit" class="control-top-margin">Submit</button>
</div>
</form>
</div>
</body>
</html>
The likelihood is that I’ll be using this just as a basis for my current requirements and adjusting as needed.
I hope this proves useful and kudos to my friend who found this and the original stackoverflow contributor. If anyone has any other examples of code that tackles this problem, that they would like to contribute, just let me know by commenting below.
Cheers!
bearandhammer 
nice one
LikeLike
No worries, cheers!
LikeLike