如何在JavaScript中將換行符替換為空格?


本教程將教我們如何在JavaScript中用空格替換**換行符**。程式設計師經常會在字串中發現不尋常的換行符,而這些隨機的換行符在使用JavaScript將它們渲染到網頁上時看起來很奇怪。

因此,解決方案是程式設計師只需要刪除換行符並用空格或其他字元連線字串。在這裡,我們有不同的方法來解決這個問題,我們將使用正則表示式和**replace()**方法來刪除不尋常的換行符。

  • 使用replace()方法

  • 使用split()join()方法

使用replace()方法

在這種方法中,我們將使用JavaScript內建方法來替換字串的字元。

  • 我們將為換行符建立一個**正則表示式**,並用**空格**字元替換所有換行符的出現。

  • replace()方法接受兩個引數。第一個是要替換的舊字元,另一個是我們將用它替換舊字元的新字元。這裡,舊字元是換行符,為此,我們將傳遞正則表示式。

語法

string.replace(/(\r
|
|\r)/g,"");

引數

  • string − 這是輸入引數。作為此引數,使用者將提供一個需要替換換行符的輸入字串。

  • /(\r\n|\n|\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.