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.

Are you generating this html, or are you simply wanting to modify it afterwards? — Blue, Aug 07 '16 at 06:15
@FrankerZ I believe that this HTML was generated, I was sent this HTML list and I wanted to give it some adjustments. — Dan, Aug 07 '16 at 06:18
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. — Blue, Aug 07 '16 at 06:20

score 5 · Accepted Answer · edited Aug 07 '16 at 12:12

5

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>

edited Aug 07 '16 at 12:12

Mi-Creativity

9,554
10
38
47

answered Aug 07 '16 at 06:19

Blue

22,608
7
62
92

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! – Dan Aug 07 '16 at 06:23
Check my comment above on your question @Dan – Blue Aug 07 '16 at 06:23
1

Add the script to the bottom of your html (Right before the `
` 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.
– Blue Aug 07 '16 at 06:39
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. – Yaron Aug 07 '16 at 06:52
@FrankerZ I now see why that didn't work; I learned a lot! Thank you so much for the help! – Dan Aug 07 '16 at 07:26

Mi-Creativity · Answer 2 · 2016-08-07T07:21:18.943

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>

yeah but it doesn't work for IE8 and below, there're polyfills though — Mi-Creativity, Aug 07 '16 at 12:19

Modifying HTML text & replacing it

2 Answers2