如何在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+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告