Converting string to sentence case using JavaScript

Create a program that converts a string to a sentence case using javascript. We will convert it using replace() method, for loop and map() method. Let’s create a simple web page to design and perform string to sentence case conversion using HTML, CSS, JS.

String to Sentence case in JS using replace() method

Problem statement

In this, we have to convert the string to a sentence case using the javascript function. For that create an HTML file and use the JS function that displays the output.

Solution

  • Create HTML file
  • Heading in <h2></h2> tag Converting string to sentence case
  • Add given string in bold tag <b>The string is: we love cricket</b>
  • Inside javascript method sentenceCase (str) use if condition to check if the string is null or empty return the false value else it uses tostring() method to return a string containing the source text.
  • Use replace() method to replace first character return str.replace(/\w\S*/g, 
  • Use toUppercase() and toLowercase() to uppercase the string
  • Display output string using document.write(“Output string is: ” + sentenceCase(‘we love cricket’));

JS code to convert string to sentence case

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body style="text-align: center;">
        <div style=" width: 500px; border: 15px solid grey; padding: 50px; margin: 50px;">
    <h2 style="color: grey;">Converting string to sentense case</h2>
    <b>The string is : we love cricket</b><br/><br/>
<script>
function sentenceCase (str) {
  if ((str===null) || (str===''))
       return false;
  else
   str = str.toString();
  
 return str.replace(/\w\S*/g, 
function(txt){return txt.charAt(0).toUpperCase() +
       txt.substr(1).toLowerCase();});
}
  
document.write("Output string is: " + sentenceCase('we love cricket'));
</script>
</body>
</html>

Output

String to Sentence case in JS using for loop

Problem statement

In this, we have to convert the string to a sentence case using for() loop in the javascript function. For that create an HTML file and use the JS function that displays the output.

Solution

  • Create HTML file
  • Heading in <h2></h2> tag Converting string to sentence case
  • Add given string in bold tag <b>The string is: alexa play the music </b>
  • Inside javascript method sentenceCase (str)  divide all words in the sentence  by using .split(” “); convert  all elements of each and every word into lowercase using .toLowerCase() 
  • Use for loop on first elements of all the words and convert them into uppercase. After converting concatenate them with all remaining elements of their respective word. Like this: for(var i = 0; i< string.length; i++){
    string[i] = string[i][0].toUpperCase() + string[i].slice(1);
    }
  • Join all the words using string.join() print the string  document.write(string.join(” “));
    and return string .
  • The string to convert sentence case is  sentenceCase(“alexa play the music.”);

JS code to convert string to sentence case using for() loop

<html>
<title>String to sentence case</title>

<body style="text-align: center;">
         <div style=" width: 500px; border: 15px solid grey; padding: 50px; margin: 50px;">
   <h2 style="color: grey;">Converting string to sentense case using For() loop</h2>
   <b>The string is : alexa play the music</b><br/><br/>

<script>
   function sentenceCase(sentence) {
      var string = sentence.toLowerCase().split(" ");
      for(var i = 0; i< string.length; i++){
         string[i] = string[i][0].toUpperCase() + string[i].slice(1);
      }
   document.write(string.join(" "));
   return string;
   }
   sentenceCase("alexa play the music.");
</script>
</body>
</html>

Output

String to Sentence case in JS using map() method

Problem statement

In this, we have to convert the string to a sentence case using map() method in the javascript function. For that create an HTML file and use the JS function that displays the output.

Solution

  • Create HTML file
  • Heading in <h2></h2> tag Converting string to sentence case
  • Add given string in bold tag <b>The string is: all about today , yesterday.</b>
  • Inside javascript method sentenceCase (str) return the string and divide all words in the sentence  by using .split(” “); convert  all elements of each and every word into lowercase using toLowerCase()  using map() will call a provided callback function once for each element in an array construct new result  return str.toLowerCase().split(‘ ‘).map(function (word)
  • Use charAt() method returns specified characters from a string and use slice() method extracts a section of string and return new string return (word.charAt(0).toUpperCase() + word.slice(1)); and join  all elements of string using join() method .
  • Display output string  using document.write(sentenceCase(“all about today , yesterday.”));

JS code to convert string to sentence case using map() method

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sentence case</title>
</head>
<body style="	text-align: center	;">
             <div style=" width: 500px; border: 15px solid grey; padding: 50px; margin: 50px;">
   <h2 style="color: grey;">Converting string to sentense case using map() method </h2>
   <b>The string is : all about today , yesterday .</b><br/><br/>

    <script>
function sentenceCase(str) {
  return str.toLowerCase().split(' ').map(function (word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
 document.write(sentenceCase("all about today , yesterday."));
</script>
</body>
</html>

Output

In this way, we learn how to convert string to sentence case using JS.