如何在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()方法的值儲存在額外的變數中。

更新於:2022年7月12日

4K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.