資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
