如何在 ReactJS 中去除输入中的空格？

---

我们将学习如何在 ReactJS 中去除输入中的空格。有时，用户会错误地在输入的开头或结尾添加不必要的空格。因此，作为开发者，我们需要检查输入字符串的开头或结尾是否包含空格。

如果我们在输入中发现空格，我们应该将其去除；否则，可能会导致问题。例如，我们需要将电子邮件存储在数据库中，并且在注册电子邮件时，用户也错误地添加了空格，我们也将带有空格的电子邮件存储在了数据库中。当用户再次访问我们的应用程序使用相同的电子邮件登录时，就会出现凭据不匹配的错误。

因此，我们需要在去除空格后存储数据以避免错误。

自定义算法

在这种方法中，我们将使用各种 JavaScript 方法创建一个自定义算法，以去除字符串开头和结尾的空格。

语法和算法

用户可以按照以下步骤创建自定义算法来修剪字符串。

步骤 1 – 使用空格作为分隔符将字符串分割成数组。

let array = inputString.split(" ");

在上述步骤中，inputString 是来自用户的字符串。

步骤 2 – 接下来，使用 while 循环和 array.shift() 方法去除前面的空格。

while (array[0] == ") {
   array.shift();
}

步骤 3 – 现在，使用 while 循环和 array.pop() 方法去除字符串末尾的所有空格。

while (array[array.length - 1] == "") {
   array.pop();
}

步骤 4 – 在最后一步，将单词数组重新连接成字符串。

let string = array.join(" ");

在上述步骤中，字符串包含没有任何空格的输入字符串。

示例

在下面的示例中，我们从用户那里获取字符串输入。我们使用 handleInputString() 函数处理输入。

在输入完整个字符串后，当用户按下提交按钮时，它将执行 handleSubmit() 函数。在 handleSubmit() 函数中，我们实现了上述算法来去除输入字符串中的空格。

用户可以在输出中观察到没有任何空格的输入字符串。

import React, { useState } from "react";
import validator from "validator";

const App = () => {
  const [inputString, setinputString] = useState("");
  const [finalString, setFinalString] = useState("");

  function handleInputString(event) {
    let string = event.target.value;
    setinputString(string);
  }
  function handleSubmit() {
    let array = inputString.split(" ");
    while (array[0] == "") {
      array.shift();
    }

    while (array[array.length - 1] == "") {
      array.pop();
    }
    
    let string = array.join(" ");
    setFinalString(string);
  }
  return (
    <div>
      <h2>
        {" "}
        Trimming the white spaces from the string 
      </h2>
      <p> Enter a string with some white spaces at beginning and end</p>
      <input type = "text" value = {inputString} onChange = {handleInputString} />
      <div > <br/> The final string after trimming white spaces is: {finalString} 
      </div><br/>
      <button onClick = {handleSubmit}>
        Submit
      </button>
    </div>
  );
};

export default App;

输出

使用 trim() 方法

trim() 方法会自动去除字符串开头和结尾的空格。我们可以通过引用字符串在任何字符串上执行 trim() 方法。

语法

用户可以按照以下语法在 ReactJS 中使用 trim() 方法去除字符串中的空格。

let str = string.trim();

在上述语法中，string 是输入字符串，str 是从 trim() 方法返回的没有空格的字符串。

示例

在下面的示例中，我们将输入字符串存储在 testString 变量中，将去除空格后的字符串存储在 finalString 变量中。

在 handleSubmit() 函数中，我们使用 trim() 方法和 inputString 字符串来去除空格。

import React, { useState } from "react";

const App = () => {
  const [testString, settestString] = useState("");
  const [finalString, setFinalString] = useState("");

  function handletestString(event) {
    let string = event.target.value;
    settestString(string);
  }
  function handleSubmit() {
    let string = testString;
    setFinalString(string.trim());
  }
  return (
    <div>
      <h3>
        {" "}
        Trimming the white spaces from the string using the
        <i> string.trim() method </i>
      </h3>
      <input type = "text" value = {testString} onChange = {handletestString} />
      <div style = {{ color: "grey", fontSize: "1 rem" }}>
        The final string after removing white spaces is {finalString}
      </div>
      <button
        onClick = {handleSubmit}
        style = {{
          backgroundColor: "grey",
          border: "2px dotted blue",
          borderRadius: "10px",
          color: "blue",
          fontSize: "1.3rem",
          padding: "0.5rem",
        }}
      >
        Submit
      </button>
    </div>
  );
};
export default App;

输出

我们学习了如何使用 trim() 方法去除空格。此外，我们还创建了自定义算法来向初学者解释 trim() 方法的工作原理。

此外，用户还可以使用 validator npm 包来去除字符串中的空格。