Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to replace line breaks with
using JavaScript?
In this tutorial, we are going to learn how to replace all the line breaks in JavaScript code using a <br> tag. There are various methods using which we can replace all the line breaks with <br> tag. Some of the methods are given below −
Using String replace() Method and RegEx
In this method we are using the String.replace() method to replace all the line breaks in the plain text with the <br> tag. Here the RegEx refers to the regular expression that we write inside the string.replace() method.
Syntax
Following is the syntax to use replace() method −
sentence.replace(/(?:\r
|\r|
)/g, "<br>");
Here sentence is the string with line breaks and the first argument of the replace() method is a regular expression.
Algorithm
Step 1 − Define a string with line breaks and display it.
Step 2 − Apply replace() method on the above-defined string. Use the above syntax to apply to replace method.
Step 3 − Display the string obtained in step 2. All line breaks are replaced by <br>.
Example
We can use the below-given code to replace all the line breaks with <br> tag using RegEx.
<!DOCTYPE html>
<html>
<body>
<p id="br"></p>
<button onClick="linebreak()">Replace</button>
<script>
let sentence = `Javascript is a dynamic computer
programming language for web.
Javascript can update and change both HTML and CSS`;
let br = document.getElementById("br");
br.innerHTML = sentence;
function linebreak() {
// Replace the line break with <br>
sentence = sentence.replace(/(?:\r
|\r|
)/g, "<br>");
// Update the value of paragraph
br.innerHTML = sentence;
}
</script>
</body>
</html>In the above code the string.replace() method checks all the 3 kinds of line breaks i.e., \r
,
and \r, and the string appearance using the \g tag and then replaces them with the <br> tag.
Using split() and join() Methods
In this method, the string is split using the delimiter and returns an array of substrings which are then combined to form an array and pass <br/> so that every joining contains the <br/>.
Syntax
Following is the syntax to apply split() and join() methods −
sentence.split("
").join("<br />");Here sentence is the string with line breaks (
) that we want to replace with <br>.
Algorithm
Step 1 − Define a string with line breaks and display it.
Step 2 − Apply split() and join() methods on the above-defined string. Use the above syntax to apply to replace method.
Step 3 − Display the string obtained in step 2. All line breaks are replaced by <br>.
Example
We can use the below given code to replace all the line breaks with <br> tag using split and join method
<!DOCTYPE html>
<html>
<body>
<p id="br"></p>
<button onClick="linebreak()">Change</button>
<script>
let sentence = `Javascript is a dynamic computer
programming language for web.
Javascript can update and change both HTML and CSS`;
let br = document.getElementById("br");
br.innerHTML = sentence;
function linebreak() {
// Replace the line break with <br>
sentence = sentence.split("
").join("<br />");
// Update the value of paragraph
br.innerHTML = sentence;
}
</script>
</body>
</html>In the above code the built_in methods are used to replace line strings with the br tag string.split() method is used to split the string with the delimiter and then the join() method is used to join the split subarrays and form an array.
2K+ Views
