如何在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();
}

第四步 - 在最后一步中，将单词数组再次连接起来成为一个字符串。

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;

输出

如何在ReactJS中去除输入的空白字符

使用trim()方法

trim()方法会自动从字符串的开头和结尾去除空格。我们可以通过将字符串作为引用来执行trim()方法。

语法

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

let str = string.trim();

在上面的语法中，字符串是一个输入字符串，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;