[JavaScript]Removing Whitespace and Newlines from Both Ends with the trim Method

2026年1月24日

Overview

User input data or text read from files often contains unintended “leading and trailing spaces” or “newline codes.” By using the JavaScript trim() method, you can easily remove whitespace (half-width spaces, full-width spaces, tabs, and newlines) from the beginning and end of a string all at once. This article explains the basic behavior of whitespace removal and how spaces inside a string are handled.

Specifications (Input/Output)

Input: A string containing spaces or newlines at the beginning or end.
Output: A new string with the extra whitespace removed (output to console log).

Basic Usage

You execute the .trim() method on the string you want to clean. This method does not change the original string; instead, it returns a formatted new string.

Full Code (HTML / JavaScript)

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Trim Demo</title>
    <script src="string-trim.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Please check the Console</h1>
        <p>The results of the trim() method are being output to the console.</p>
    </div>
</body>
</html>

JavaScript (string-trim.js)

The following code demonstrates various trimming patterns using corrected syntax.

/**
 * Demonstration of string trimming
 */
const runTrimDemo = () => {
    console.log('--- 1. Removing Leading and Trailing Spaces ---');
    
    const targetString1 = "  Hello   ";
    // Leading and trailing whitespace is removed
    const trimmedString1 = targetString1.trim();
    
    console.log(`[${targetString1}]`); // Original: "  Hello   "
    console.log(`[${trimmedString1}]`); // Result: "Hello"


    console.log('--- 2. Removing Newline Codes ---');
    
    // \n represents a newline
    const targetString2 = "I ate an apple\n";
    // Newlines at the end are also treated as whitespace and removed
    const trimmedString2 = targetString2.trim();
    
    console.log(`Original length: ${targetString2.length}`); // 15 (including newline)
    console.log(`[${trimmedString2}]`); // "I ate an apple"
    console.log(`Processed length: ${trimmedString2.length}`); // 14


    console.log('--- 3. Spaces Inside the String ---');
    
    const targetString3 = "  apple.   orange  ";
    // Both ends are removed, but spaces between words are kept
    const trimmedString3 = targetString3.trim();
    
    console.log(`[${trimmedString3}]`); // "apple.   orange"
};

// Execute
runTrimDemo();

Customization Tips

Removing only one side: If you want to remove whitespace only from the beginning (left side), use trimStart(). To remove it only from the end (right side), use trimEnd().
Full-width spaces: In modern browsers, trim() recognizes and removes not only standard half-width spaces but also full-width spaces (often used in Japanese input).

Important Notes

The trim() method only targets whitespace at the “both ends” of a string. It cannot remove spaces inside the string (such as those between words). If you need to remove all spaces within a string, you must use replaceAll(" ", "") or regular expressions. Additionally, calling trim() on null or undefined will result in an error, so it is safer to verify that the variable is a string before using it.

Applications

Input Form Validation

This method is frequently used to clean data when a user accidentally enters only spaces in a form or adds spaces before or after their name.

const inputName = "   "; // State where a user entered only spaces

// By checking after trim(), you can treat "space only" input as "empty"
if (inputName.trim() === "") {
    console.log("Please enter your name (spaces only are not allowed).");
}

Conclusion

The trim() method is an essential tool for normalizing user input. Since it clears “invisible characters” like spaces, tabs, and newlines from both ends of a string, it is good practice to use this method before saving data to a database or performing required field checks.

よかったらシェアしてね！