如何在 ReactJS 中修剪输入中的空格?

react jsjavascriptfront end technology

我们将学习如何在 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;