Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create half of the string in uppercase and the other half in lowercase?

Javascript Web Development Front End Technology

To convert half of a string to uppercase and the other half to lowercase, we can use JavaScript's built-in string methods like toUpperCase(), toLowerCase(), and substr() (or substring()). This tutorial demonstrates two effective approaches to achieve this transformation.

Using for-loop with toUpperCase() and toLowerCase()

This approach uses loops to iterate through the string and convert each character individually based on its position.

Syntax

for (let i = 0; i < length / 2; i++) {
   newStr += string[i].toUpperCase();
}
for (i = length / 2; i < length; i++) {
   newStr += string[i].toLowerCase();
}

Example: Character-by-Character Conversion

<html>
<body>
   <h2>Converting first half to uppercase and second half to lowercase</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let string = "JavaScriptTutorial";
      let length = string.length;
      let newStr = "";
      
      // Convert first half to uppercase
      for (let i = 0; i < Math.floor(length / 2); i++) {
         newStr += string[i].toUpperCase();
      }
      
      // Convert second half to lowercase
      for (let i = Math.floor(length / 2); i < length; i++) {
         newStr += string[i].toLowerCase();
      }
      
      output.innerHTML = "Original string: " + string + "<br/>";
      output.innerHTML += "Converted string: " + newStr;
   </script>
</body>
</html>

Original string: JavaScriptTutorial
Converted string: JAVASCRIptutorial

Alternative: Using for-of Loop

<html>
<body>
   <h2>Using for-of loop approach</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let originalString = "HelloWorldExample";
      let length = originalString.length;
      let firstHalf = "";
      let secondHalf = "";
      let index = 0;
      
      for (let char of originalString) {
         if (index < Math.floor(length / 2)) {
            firstHalf += char;
         } else {
            secondHalf += char;
         }
         index++;
      }
      
      let convertedStr = firstHalf.toUpperCase() + secondHalf.toLowerCase();
      
      output.innerHTML = "Original: " + originalString + "<br/>";
      output.innerHTML += "First half: " + firstHalf + "<br/>";
      output.innerHTML += "Second half: " + secondHalf + "<br/>";
      output.innerHTML += "Converted: " + convertedStr;
   </script>
</body>
</html>

Original: HelloWorldExample
First half: HelloWor
Second half: ldExample
Converted: HELLOWORldexample

Using substring() Method (Recommended)

The substring() method provides a cleaner, more concise solution by directly extracting string portions and applying transformations in a single line.

Syntax

let convertedStr = string.substring(0, Math.floor(string.length / 2)).toUpperCase() + 
                   string.substring(Math.floor(string.length / 2)).toLowerCase();

Example: One-Line Solution

<html>
<body>
   <h2>Using substring() method - Most efficient approach</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById('output');
      let stringToConvert = "ProgrammingExample";
      let length = stringToConvert.length;
      
      let convertedStr = stringToConvert.substring(0, Math.floor(length / 2)).toUpperCase() + 
                         stringToConvert.substring(Math.floor(length / 2)).toLowerCase();
      
      output.innerHTML = "Original string: " + stringToConvert + "<br/>";
      output.innerHTML += "String length: " + length + "<br/>";
      output.innerHTML += "Converted string: " + convertedStr;
   </script>
</body>
</html>

Original string: ProgrammingExample
String length: 18
Converted string: PROGRAMMINgexample

Comparison

Method Code Length Performance Readability
for-loop Multiple lines Good Moderate
for-of loop Multiple lines Good Better
substring() Single line Best Excellent

Key Points

  • Use Math.floor() for odd-length strings to handle the middle character properly
  • The substring() method is more efficient than character-by-character iteration
  • Both substr() (deprecated) and substring() work, but prefer substring()
  • For odd-length strings, the extra character goes to the second half (lowercase)

Conclusion

The substring() method provides the most efficient and readable solution for converting half a string to uppercase and the other half to lowercase. It accomplishes the task in a single line while maintaining excellent performance and code clarity.

Updated on: 2026-03-15T23:19:00+05:30

2K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements