Home

SiteMap

JavaScript toLowerCase() Method explained - 3 examples

javascript
The toLowerCase() method in JavaScript, is used to convert a string into "lower case".

➡️ getElementsByTagName() method

Syntax of toLowerCase() Method

string.toLowerCase();

The method takes no parameter. It returns a "new" string in lower case, without changing the original string.

Example 1.

<script>
    const str = "HELLO, I am Arun Banik";
    document.write (str.toLowerCase());  	// Output: hello, i am arun banik

    document.write (str);  	// The string, however remains unchanged.
</script>
</html>
Try it

Example 2.

You can attach the method directly to an elements value property. For example, let us assume I have a textbox that accepts value in "uppercase". However, when I submit the value, I want to convert the string (value) in lowercase.

<body>
  <div><input type="text" id="tb" style="text-transform:uppercase;"></div>
  <p><input type="button" value="Click it" onclick="say_hello()" ></p>
  <p id="greet"></p>
</body>

<script>
    let say_hello = () => {
      let str = document.getElementById('tb').value.toLowerCase();
      document.getElementById('greet').innerHTML = str;		// Output: the value is converted to lowercase.
    }
</script>
Try it

Example 3.

You can use the ".toLowerCase()" method to convert a single character (alphabet) or a desired number of characters to lowercase.

<body>
  <p id="greet"></p>
</body>

<script>
  let lowerSixthLetter = () => {
    let str = "Let's PLAN a holiday :-)";
    document.getElementById('greet').innerHTML = str.substring(0, 6) + str.charAt(6).toLowerCase() + str.substring(7);    
      // OR
      // str.substring(0, 6) + str.charAt(6).toLowerCase() + str.substring(7, str.length);

      // Output: Let's pLAN a holiday :-)
  }
  
  lowerSixthLetter();
</script>
Try it

➡️ getElementsByTagName() method