如何在 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 包从字符串中修剪空格。
