如何在JavaScript中用空格替換換行符?
本教程將教我們如何用空格替換JavaScript中的換行符。程式設計師經常會在字串中發現不尋常的換行符,而這些隨機的換行符在使用JavaScript將它們渲染到網頁上時看起來很奇怪。
因此,解決方案是程式設計師只需要刪除換行符,並用空格或其他字元連線字串。在這裡,我們有不同的方法來解決這個問題,我們將使用正則表示式和replace()方法來刪除不尋常的換行符。
使用replace()方法
使用split()和join()方法
使用replace()方法
在這種方法中,我們將使用JavaScript內建方法來替換字串的字元。
我們將為換行符建立一個正則表示式,並用空格字元替換所有換行符的出現。
replace()方法接受兩個引數。第一個是要替換的舊字元,另一個是我們將用它替換舊字元的新字元。這裡,舊字元是換行符,為此,我們將傳遞正則表示式。
語法
string.replace(/(\r
|
|\r)/g,"");
引數
string − 這是輸入引數。作為此引數,使用者將提供一個需要替換換行符的輸入字串。
/(\r
|
|\r)/g − 這是換行符的正則表示式。這裡,‘\r’
’表示Windows中的換行符。‘|’表示OR運算。‘
’表示Linux系統中的換行符,而‘\r’表示Mac OS中的換行符。最後,‘/g’表示所有換行符的出現。
示例1
在下面的示例中,我們使用了replace()方法來從字串中刪除換行符,並用空格替換它。
<!DOCTYPE html> <html> <body> <h2>String replace() method- replacing new lines with the spaces</h2> <p>Original String: "
Welcome
to \rthe
\rtutorials point."</p> <p> String after replacing new lines with space: </p> <p id="replacedString"></p> <script> let replacedString = document.getElementById("replacedString"); let originalString = "
Welcome
to \rthe
\rtutorials point. "; // replacing line breaks with spaces using regular expression. let outputString = originalString.replace(/(\r
|
|\r)/g, " "); replacedString.innerHTML = outputString; </script> </body> </html>
在上面的輸出中,使用者可以觀察到我們已經刪除了所有換行符,字串看起來是連續的。
使用split()和join()方法
在這種方法中,我們將使用split()和join()方法來用空格替換換行符。split()和join()是JavaScript字串庫的內建方法。
為了達到我們的目標,我們需要從所有換行符處分割字串,然後使用單個空格字元再次連線它。
使用者可以按照以下語法使用split()和join()方法。
語法
let outputString = originalString.split( '
' ); let result = outputString.join(' ');
引數
originalString − 這是需要將換行符替換為空格的字串輸入。
示例2
下面的示例演示了split()和join()方法如何用空格替換所有換行符。我們將從‘
’處分割字串,並將所有分割的字串儲存在一個變數中。之後,我們將使用join()方法連線分割的字串,從而得到我們想要的輸出。
<!DOCTYPE html> <html> <body> <h2>Replacing new lines with the spaces in javascript</h2> <p> Original string: </p> <p>"
One
of
the
best
computer
science
portal
is the
tutorials point. " </p> <p> String after replacing the line breaks: </p> <p id="replacedString"></p> <script type="text/javascript"> let replacedString = document.getElementById("replacedString"); let originalString = "
One
of
the
best
computer
science
portal
is the
tutorials point. "; let splitString = originalString.split('
'); joinString = splitString.join(' '); replacedString.innerHTML = joinString; </script> </body> </html>
使用者可以觀察上面的輸出,並檢查我們是否已成功地將所有換行符都替換為空格。
結論
在本教程中,我們學習了兩種最常用的方法來用空格替換換行符。在第一種方法中,我們使用了換行符的正則表示式和replace方法。但是,使用者也可以使用repalceAll()方法達到目標,並且使用者不需要在換行符的正則表示式中使用‘/g’標誌。
在第二種方法中,使用者也可以在一行中使用split()和join()方法,而無需將split()方法的值儲存在額外的變數中。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP