如何在 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 包來去除字串中的空格。