JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="namesList">
  <li><a href="john-smith/"> john-smith/</a></li>
  <li><a href="joe-smith/"> joe-smith/</a></li>
  <li><a href="gina-smith/"> gina-smith/</a></li>
  <li><a href="tom-smith/"> tom-smith/</a></li>
  <li><a href="peter-smith/"> peter-smith/</a></li>
</ul>

JavaScript

var namesList = document.querySelectorAll('#namesList li a');

for (var i = 0; i < namesList.length; ++i) {
  var text = namesList[i].textContent.trim(),
    textL = text.length - 1,
    firstName, lastName, theIndex;

  theIndex = text.indexOf('-');
  firstName = text.charAt(0).toUpperCase() + text.substring(1, theIndex);
  lastName = text.charAt(theIndex + 1).toUpperCase() + text.substring(theIndex + 2, textL);
  console.log(firstName + ' ' + lastName);
  namesList[i].textContent = firstName + ' ' + lastName;
}