如何在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()方法的值存储在额外的变量中。