JSFiddle - React, Tailwind, and code Playground
HTML
<ul class='proper-case'>
<li><a>THE QUICK BROWN FOX IS—ABOUT TO JUMP OVER THE FENCE</a></li>
<li><a>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</a></li>
<li><a>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</a></li>
<li><a>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</a></li>
<li><a>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</a></li>
</ul>
JavaScript
$('ul.proper-case li a').each(function(){
var ele = $(this);
ele.text(toProperCase(ele.text()));
});
function toProperCase(str)
{
var noCaps = ['of','a','the','and','an','am','or','nor','but','is','if','then',
'else','when','at','from','by','on','off','for','in','out','to','into','with'];
return str.replace(/\w[^\s\u2014]*/g, function(txt, offset){
if(offset != 0 && noCaps.indexOf(txt.toLowerCase()) != -1){
return txt.toLowerCase();
}
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}