数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 JavaScript 中替换具有相同类名的不同元素中的空格？
在这篇文章中，我们将学习如何在 JavaScript 中替换具有相同类名的不同元素中的空格。让我们深入了解这篇文章，学习更多关于替换不同元素中空格的方法。
使用 split() 和 join() 方法
split() 方法将一个 字符串 分成几个 子字符串 并将其作为 数组 返回。当字符串中存在分隔符时，字符串将根据指定为 参数 的分隔符进行分割。此参数指定空格 字符 (" ")，以便在出现空格时分割字符串。
使用 join() 方法连接字符串数组时，使用 分隔符。使用所选分隔符，连接的字符串将包含在新返回的字符串中。返回的数组将应用此方法，并且字符串将无需使用 分隔符 ("") 进行连接。
语法
以下是 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>
当脚本执行时，它将生成一个输出，其中包含我们在脚本中提到的文本以及一个按钮。如果用户点击名为“删除空格”的按钮，则会触发事件，并显示脚本中使用的文本，文本之间没有任何空格。
378 次浏览
