Modifying HTML text & replacing it

Question

I am working on an HTML list full of names, and each name is written in this format:

"firstname-lastname/" (example: john-smith/)

So I was curious to know if I could use JavaScript to change the format of the text into:

"Firstname Lastname" (example: John Smith)

As I am relatively new to JavaScript, and I haven't done much work with it the language yet, and I wasn't able to do this.

Here is a snippet of the HTML list:

<ul>
<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>

Also, if I wasn't clear enough, I do not want to change the href, just the actual text that is displayed.

• Blue: Are you generating this html, or are you simply wanting to modify it afterwards?
• Dan: @FrankerZ I believe that this HTML was generated, I was sent this HTML list and I wanted to give it some adjustments.
• Blue: I've posted below how you can modify the string. If you'd like to post a larger HTML chunk, I can show you how to modify the contents of the anchor tags with what you want.
• Dan: Added a larger html chunk! @FrankerZ

Answer 1

You can do this with Regex:

var REGEX_FIND = /(.*?)-(.*?)\/$/;
//From: http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
function capitalizeFirstLetter(string) {
 return string.charAt(0).toUpperCase() + string.slice(1);
}
$('ul li a').each(function() {
 var text = $(this).text().trim();
 
 var m;
 
 if ((m = REGEX_FIND.exec(text)) !== null) {
 $(this).text(capitalizeFirstLetter(m[1]) + ' ' + capitalizeFirstLetter(m[2]));
 }
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<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>

• Dan: Thanks for the code, but how could I loop through each of my list items and change the HTML text from there? Sorry, I'm new to JavaScript!
• Blue: Check my comment above on your question @Dan
• Blue: Add the script to the bottom of your html (Right before the </body> tag), or wrap your functions in a $(document).ready(function() { /* Your code here */ }); tag. Because the HTML isn't actually initialized at the time the code is run, $('ul li a') doesn't find any elements, so the code is not run.
• Yaron: For this kind of mission you can feel free to use var tom_link = document.querySelectorAll("a[href='tom-smith']");, jQuery is a bit overkill.
• Dan: @FrankerZ I now see why that didn't work; I learned a lot! Thank you so much for the help!

Answer 2

Alternatively you can do it like this

jsFiddle

// target the anchor tags inside the list items
var namesList = document.querySelectorAll('#namesList li a');
// loop through
for (var i = 0; i < namesList.length; ++i) {
 // text value, use trim to get rid of spaces on right and left sides of the string
 var text = namesList[i].textContent.trim(), 
 
 // number of chars in text - 1, thus we automatically eliminate the last 
 // char "/" in each string
 textL = text.length - 1, 
 firstName, lastName, theIndex;
 // we determine the number where the symbol - lies 
 theIndex = text.indexOf('-');
 
 // for firstName, turn the first char to upper case, and append 
 // characters from the second char to the index of "-" minus 1
 firstName = text.charAt(0).toUpperCase() + text.substring(1, theIndex);
 
 // for lastName, turn the first char AFTER the index of "-" to upper case, and append 
 // characters from index + 1 to the value of text length
 lastName = text.charAt(theIndex + 1).toUpperCase() + text.substring(theIndex + 2, textL);
 console.log(firstName + ' ' + lastName);
 
 // join firstName and lastName with space in between 
 namesList[i].textContent = firstName + ' ' + lastName;
}

<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>

• Blue: Nice alternative way
• Mi-Creativity: yeah but it doesn't work for IE8 and below, there're polyfills though