Using only the first letter of a contraction as uppercase

Question

Using only the first letter of a contraction as uppercase

One of the challenges I'm facing right now is how to properly capitalize the first letter of each word in a string while keeping all other letters in lowercase. Although I've dedicated countless hours to working on this, my code appears to be about 95% complete.

The only issue that remains is that when it comes across contractions like "I'm", it capitalizes both parts as separate words ("I" and "M") rather than just the "I". I even added a console.log to check what's happening, and it confirms that both letters are being capitalized in the same step. How can I ensure that only the initial letter is transformed?

function titleCase(str) {

  str = str.toLowerCase(); //convert everything to lowercase
  str = str.split(" "); //split the string into an array

  for(i = 0; i < str.length; i++){
    var strItem = str[i]; //retrieve item from array
    strItem = strItem.replace(/\b./g, function(m){ return m.toUpperCase(); }); //capitalize the first letter
   //console.log(strItem);
   str[i] = strItem; //update item in the array
  }

  str = str.join(" "); //merge array elements back into a string
  return str;
}

titleCase("I'm a little tea pot");

I appreciate your assistance with this matter.

javascript string

Answer 1

Answer №1

It appears that your issue stems from using a global match in the replacer expression.

Please remove the g.

function titleCase(str) {
  str = str.toLowerCase();               // Convert to lowercase
  str = str.split(/\s+/);                // Transform string into an array  
  for (var i = 0; i < str.length; i++) {
    var strItem = str[i];                // Grab item in array
    strItem = strItem.replace(/\b./,
        function(m) {
              return m.toUpperCase();    // Capitalize it
        }
    );                           
    str[i] = strItem;                    // Update array with modified item
  }
    
  return str.join(" ");                  // Join array elements back into a string
}

document.body.innerHTML = titleCase("I'm a little tea pot");

Simplified

You can define a capitalCase function and utilize it as the callback function for each word.

function titleCase(str) {
  return str.split(/\s+/).map(captitalCase).join(' ');
}

function captitalCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
}

document.body.innerHTML = titleCase("I'm a little tea pot");

Preserve White-Space

If white-space preservation is desired, you can replace all non-white-space character sequences with their corresponding capitalCase equivalent.

function titleCase(str) {
  return str.replace(/(\S+)/g, function(m) {
    return captitalCase(m);
  });
}

function captitalCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
}

document.body.innerHTML = titleCase("I'm   a   little  \n  tea   pot");

body {
  white-space: pre;
}

Answer 2

It appears that your issue stems from using a global match in the replacer expression.

Please remove the g.

function titleCase(str) {
  str = str.toLowerCase();               // Convert to lowercase
  str = str.split(/\s+/);                // Transform string into an array  
  for (var i = 0; i < str.length; i++) {
    var strItem = str[i];                // Grab item in array
    strItem = strItem.replace(/\b./,
        function(m) {
              return m.toUpperCase();    // Capitalize it
        }
    );                           
    str[i] = strItem;                    // Update array with modified item
  }
    
  return str.join(" ");                  // Join array elements back into a string
}

document.body.innerHTML = titleCase("I'm a little tea pot");

Simplified

You can define a capitalCase function and utilize it as the callback function for each word.

function titleCase(str) {
  return str.split(/\s+/).map(captitalCase).join(' ');
}

function captitalCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
}

document.body.innerHTML = titleCase("I'm a little tea pot");

Preserve White-Space

If white-space preservation is desired, you can replace all non-white-space character sequences with their corresponding capitalCase equivalent.

function titleCase(str) {
  return str.replace(/(\S+)/g, function(m) {
    return captitalCase(m);
  });
}

function captitalCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
}

document.body.innerHTML = titleCase("I'm   a   little  \n  tea   pot");

body {
  white-space: pre;
}

Answer 3

Answer №2

My recommendation is to utilize

<string>.charAt(<index>)

in order to obtain the first letter of a string, and also use

<string>.slice(<index>)

to extract a portion of a string.

Suggestion: Once you have each word, consider using charAt() to capitalize the first letter, followed by taking a slice of the remaining part of the string and converting it to lowercase.

UPDATE:

Answer:

function upperFirstLetterInWords(str) {

  var totalString = "";
  //Extract words from the given sentence - 
  //Use regex /\s+/g to handle multiple spaces within the sentence.
  var words = str.split(" "); 

  //Iterate through each word...
  //Using a for loop since we are dealing with an array,
  //which is more efficient than using a forEach loop or lambda.
  for(var i = 0; i < words.length; ++i) {
     //Implement desired changes here.javascript:;
     totalString += words[i].charAt(0).toUpperCase() +
         words[i].slice(1).toLowerCase()  +
         " ";
  }

  //Trim any trailing spaces.
  return totalString.trim();

}

console.log(upperFirstLetterInWords("I'm A LitTle TEa POt."));

Answer 4

My recommendation is to utilize

<string>.charAt(<index>)

in order to obtain the first letter of a string, and also use

<string>.slice(<index>)

to extract a portion of a string.

Suggestion: Once you have each word, consider using charAt() to capitalize the first letter, followed by taking a slice of the remaining part of the string and converting it to lowercase.

UPDATE:

Answer:

function upperFirstLetterInWords(str) {

  var totalString = "";
  //Extract words from the given sentence - 
  //Use regex /\s+/g to handle multiple spaces within the sentence.
  var words = str.split(" "); 

  //Iterate through each word...
  //Using a for loop since we are dealing with an array,
  //which is more efficient than using a forEach loop or lambda.
  for(var i = 0; i < words.length; ++i) {
     //Implement desired changes here.javascript:;
     totalString += words[i].charAt(0).toUpperCase() +
         words[i].slice(1).toLowerCase()  +
         " ";
  }

  //Trim any trailing spaces.
  return totalString.trim();

}

console.log(upperFirstLetterInWords("I'm A LitTle TEa POt."));

Answer 5

Answer №3

Just for fun, I decided to challenge myself and find an alternative javascript solution that didn't involve using regex:

var selectedParagraph = document.getElementsByTagName('p')[1];

var textUC = [];

function convertToTitleCase(element) {
var textLC = element.innerHTML.toLowerCase().split(' ');
for (var i = 0; i < textLC.length; i++) {
textUC[i] = textLC[i].charAt(0).toUpperCase() + textLC[i].slice(1);}
element.innerHTML = textUC.join(' ');
}

window.onload = convertToTitleCase(selectedParagraph);

<p>I'm a little tea pot</p>
<p>I'm a little tea pot</p>

Answer 6

Just for fun, I decided to challenge myself and find an alternative javascript solution that didn't involve using regex:

var selectedParagraph = document.getElementsByTagName('p')[1];

var textUC = [];

function convertToTitleCase(element) {
var textLC = element.innerHTML.toLowerCase().split(' ');
for (var i = 0; i < textLC.length; i++) {
textUC[i] = textLC[i].charAt(0).toUpperCase() + textLC[i].slice(1);}
element.innerHTML = textUC.join(' ');
}

window.onload = convertToTitleCase(selectedParagraph);

<p>I'm a little tea pot</p>
<p>I'm a little tea pot</p>

Using only the first letter of a contraction as uppercase

Answer №1

Simplified

Preserve White-Space

Answer №2

Answer №3

Similar questions

Meteor, app has been upgraded and now receiving error message 'TypeError: check is not defined'

Dealing with a jQuery/JavaScript issue involving thumbnail images

Update a separate React component in response to the interaction with a different React component

Choose a column in a table and organize it in ascending or descending order with the help

Encountered an error while trying to click the cookie button using Selenium: "object[] does not have a size or

What causes the index to display [object Object] rather than an integer in React?

Showing the `ViewBag` data within the `@Html.DropDownListFor` method enclosed

uWebSockets supporting multiple concurrent user sessions

The Best Way to Filter Mongo Documents Using Nested Objects

Utilizing the import feature for structuring the routes folder in Express with Node.js

Providing Node-server with Vue.js Server Side Rendering

Cross-Origin Resource Sharing using Express.js and Angular2

showing sections that collapse next to each other

Error: Module 'fs' does not export the function 'existsSync' as requested

Error in HTML Sorting

Trigger the click event on the ul element instead of the li element using jQuery

Passport.js is throwing an error due to an unrecognized authentication

Discover a method to conceal an element within a <div> by monitoring mouseover events in a separate <div> container

What is the best way to create a scrollable tbody in an HTML table using React?

Tips for gently scrolling instead of quickly scrolling all at once