How to Split a string into Multiple Lines on a Web page using JavaScript

Last Updated: 08th October 2026

1) Using \n to Split string

Previously, we used the \n to split a string. The \n indicated new line. You can simply add it within a string. For example,

<script>
let split_string = () => {
    const str = 'Hello, \n I am \n Arun \n Banik';
    document.getElementById('dFyn').innerText = str;
}

split_string();
</script>

When dealing with a string constant that includes "\n" values, it can become quite messy, especially if it's a long string like a sentence or a paragraph. You'll need to manually add a new line (\n) after each string or value, which can be cumbersome.

Note: I am writing the string in a <div> element on my web page using innerText property. However, if you want to add string using .innerHTML, then replace \n with <br />. And the code should be,

let split_string = () => {
    const str = 'Hello, <br /> I am <br /> Arun Banik';     // Show multi line using <br />.
    document.getElementById('dFyn').innerHTML = str;       // Using innerHTML property.
}

split_string();

2) Using .split() and .join() Methods

You can use these methods occasionally, in a different scenario. You can use the .split() method and the .join() method together to split a string into multiple lines. Here again you will have to use the \n (new line). However, not within the strings (like the 1st example above), but only once.

<script>
let split_string = () => {
  const str1 = 'Hello, I am Arun Banik';
  const arr = str1.split(' ');
  document.getElementById('dFyn').innerText = arr.join('\n');
}

split_string();
</script>

This is clean. However, I am using two different methods here and it might look a little complicated. I have used this technique a few times. There’s no need to add \n repeatedly within the string.

And again, if you are using the .innerHTML property, then do this.

document.getElementById('dFyn').innerHTML = arr.join('<br />');

Output is the same.

3) Using ES6 Template Literals

There is a new ES6 feature, called the Template Literals. Its a clean and an easy way to split a string into multiple lines.

<script>
let split_string = () => {
    const str = `Hello,
    I am
    Arun
    Banik`;

    document.getElementById('dFyn').innerText = str;
}

split_string();
</script>

💡 Careful here. The string is not within a single quote, its within a back quote ( ` ). Its with the tild (~) symbol on the key board.

Remember: The output may be different when using the console.log() method. So, be careful with spaces.

There are several other methods to this.

4) Using replace()

This method is arguably simpler than .split().join() methods that I have explained above. It says, replace each space with a newline. For example,

const str = 'Hello, I am Arun Banik';
const result = str.replace(/ /g, '\n');
console.log(result);

Result:

Hello,
I
am
Arun
Banik

5) Using split() and forEach()

You can split the string and process each part individually, using .split() and forEach() methods. For example,

<div id="dFyn">
</div>

<script>
    const str = 'Hello, I am Arun Banik';
    const arr = str.split(' ');

    document.getElementById('dFyn').innerText = '';

    arr.forEach(word => {
        document.getElementById('dFyn').innerText += word + '\n';
    });
</script>

6) Using a regular expression with replace() method

This method will be useful if whitespace may contain multiple spaces or tabs. For example,

const str = 'HTML,   CSS\tJavaScript,    React';
const result = str.replace(/\s+/g, '\n');
console.log(result);

Result:

HTML,
CSS
JavaScript,
React

The methods I’ve shared are simple and straightforward. They use a combination of traditional JavaScript techniques and modern ES6 features. Best of all, you don't need any third-party tools or libraries to split a string into multiple lines.

👉 Do you know you can easily remove duplicates in JavaScript array using an ES6 feature? Check out this article.

← PreviousNext →