在 JavaScript 中用同一个类替换不同元素中的空格?
在本文中，我们将学习在 JavaScript 中用同一个类替换不同元素中的空格。让我们阅读本文以了解有关替换不同元素中的空格的更多信息。
使用 split() 和 join() 方法
split() 方法将 字符串 分成几个 子字符串 并将它们作为 数组 返回。当字符串中存在分隔符时，将根据指定为 参数 的分隔符拆分字符串。此参数指定在存在空格时用于分隔字符串的空格 字符 (" ")。
使用 join() 方法时，使用 separator 连接字符串数组。连接后的字符串将包含在使用所选分隔符返回的新字符串中。返回的数组将受此方法约束，并且字符串将在不使用分隔符 ("")的情况下进行连接。
语法
以下是 split() 和 join() 方法的语法。
string.split(" ").join("")
示例
在下面的示例中，我们使用 split() 和 join() 方法。
<!DOCTYPE html>
<html>
<body>
<p>
C R E D I T C A R D
</p>
<button onclick="removeSpaces()">
Remove Spaces
</button>
<p>
After Removing Spaces:
<span class="output"></span>
</p>
<script>
function removeSpaces() {
originalText = "C R E D I T C A R D";
removedSpacesText = originalText.split(" ").join("");
document.querySelector('.output').textContent = removedSpacesText;
}
</script>
</body>
</html>
脚本执行时，将生成一个输出，其中包含我们在脚本中提到的文本以及一个按钮。如果用户单击名为"删除空格"的按钮，则会触发事件并显示脚本中使用的文本，中间没有空格。
使用正则表达式的 replace() 方法
可以使用 replace() 方法将一个 字符串 替换为另一个 字符串。第一个参数是需要替换的字符串，第二个参数是需要替换的 字符串。
全局属性和带有空格字符 (" ") 的正则表达式作为第一个参数发送。当使用空字符串作为第二个参数时，这将从字符串中删除所有空格实例。这样做会消除原始字符串的所有空格。
语法
以下是使用正则表达式的 replace() 方法的语法
string.replace(/ /g, "")
示例
考虑以下示例，我们使用正则表达式的 replace() 方法删除空格
<!DOCTYPE html>
<html>
<body>
<p>
W E L C O M E
</p>
<button onclick="Spaces()">
Remove Spaces
</button>
<p>
Updated :
<span class="output"></span>
</p>
<script>
function Spaces() {
originalText = "W E L C O M E";
newText = originalText.replace(/ /g, "");
document.querySelector('.output').textContent = newText;
}
</script>
</body>
</html>
运行上述脚本时，输出窗口将弹出并显示脚本中使用的文本以及可点击按钮。当用户点击按钮时，事件将被触发并在网页上显示一串文本，中间没有空格。
使用带有扩展运算符的reduce()方法
使用扩展运算符将字符串转换为数组，当需要将数组缩减为单个值时，使用reduce()方法。
它为每个数组值执行提供的函数，将函数的返回结果存储在累加器中，并从数组函数中创建一个单个值，以确定字符串中的每个字符是否为空格。如果字符是空格，则不要将其添加到累加器中；如果不是空格，则添加它。最终的累加器返回一个没有任何空格的字符串。
语法
以下是带有扩展运算符的reduce()方法的语法
[...string].reduce((accum, char)=> (char===" ") ? accum : accum + char, '')
示例
让我们考虑另一个示例，其中我们使用带有扩展运算符的reduce()方法来删除空格。
<!DOCTYPE html>
<html>
<body>
<p>
T U T O R I A L
</p>
<button onclick="Spaces()">
Remove Spaces
</button>
<p>
Updated One:
<span class="output"></span>
</p>
<script>
function Spaces() {
originalText = "T U T O R I A L";
removedSpacesText = [...originalText].reduce((accum, char)=> (char===" ") ? accum : accum+char, '') ;
document.querySelector('.output').textContent = removedSpacesText;
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含我们在脚本中提到的文本以及一个按钮。如果用户点击名为"删除空格"的按钮，则会触发事件并显示脚本中使用的文本，中间没有空格。
