How to Add a New Line in a String [Solved]
String manipulation in JavaScript is one of those things that’s easy to learn but hard to master.
Once you think you have a grasp on it, a change of context can throw a wrench into everything you’ve learned up to that point.
If you’ve ever had trouble adding a new line character to a string, read on.
How to add a new line to a string
In JavaScript and many other programming languages, the newline character is \n. To add a new line to a string, all you need to do is add the \n character wherever you want a line break.
For example:
const testStr = "Hello, World,\nand all you beautiful people in it!
console.log(testStr);
/*
Hello, World,
and all you beautiful people in it!
*/
Be mindful of the white space around the newline character, as it may affect the characters after the line break:
const testStr = "Hello, World,\n and all you beautiful people in it!
console.log(testStr);
/*
Hello, World,
and all you beautiful people in it!
*/
With template literals, sometimes called template strings, that were introduced in ES6, it’s even easier to add new lines to your strings.
Template literals are just strings wrapped in backticks (`) rather than single (’) or double (") quotation marks.
One of the things that makes template literals really special is that they preserve any white space, including newlines:
const testStr = `Hello, World,
and all you beautiful people in it!`;
console.log(testStr);
/*
Hello, World,
and all you beautiful people in it!
*/
That’s all easy enough to understand, but what if you try to append your string with line breaks to a web page?
How to append a string with new lines to the DOM
Imagine you have the following code:
<div id="ovde">
...
</div>
div {
font-size: 2em;
font-weight: bold;
}
let customItems = "1,2,3";
customItems = customItems.split(",");
for (let i = 0; i < customItems.length; i++) {
customItems[i] = "- " + customItems[i] + "\n";
}
customItems = customItems.join("");
document.getElementById("ovde").innerHTML = customItems;
It looks like your implementation should work.
You split the customItems string into an array of strings, then looped through and appended "- " to the beginning and "\n" to the end of each string in the array. Then you just used .join() to combine the array back into a single string and appended it to the DOM.
Here’s what it looks like with comments:
let customItems = "1,2,3";
customItems = customItems.split(",");
console.log(customItems); // ["1", "2", "3"]
for (let i = 0; i < customItems.length; i++) {
customItems[i] = "- " + customItems[i] + "\n";
}
console.log(customItems); // ["- 1\n", "- 2\n", "- 3\n"]
customItems = customItems.join("");
console.log(customItems); // "- 1\n- 2\n- 3\n"
document.getElementById("ovde").innerHTML = customItems;
Still, when you look at the page, everything appears on the same line:
Even stranger, when you inspect the page, you can see the line breaks:
So what’s going on here?
Solution
There are a couple of things you can do depending on the situation.
Option 1
First, you could change your JavaScript code slightly and add linebreak (<br>) elements instead of "\n" after each string in the customItems array:
let customItems = "1,2,3";
customItems = customItems.split(",");
for (let i = 0; i < customItems.length; i++) {
customItems[i] = "- " + customItems[i] + "<br>";
}
customItems = customItems.join("");
document.getElementById("ovde").innerHTML = customItems;
Which results in the following output:
Keep in mind that the <br> element has a very specialized purpose. According to MDN, <br> elements are only for adding line breaks in text “where the division of lines is significant” like a poem or a postal address.
Line break elements shouldn’t be used for breaking up paragraphs or increasing the spacing between elements. To do those, you should separate paragraph tags and adjust the margin in CSS to do both of those things, respectively.
Option 2
With that in mind, your second option is to adjust the CSS of the div element you’re appending the text to.
Go back to your original JS code:
let customItems = "1,2,3";
customItems = customItems.split(",");
for (let i = 0; i < customItems.length; i++) {
customItems[i] = "- " + customItems[i] + "\n";
}
customItems = customItems.join("");
document.getElementById("ovde").innerHTML = customItems;
Then just add a new CSS declaration that sets the white-space property to no-wrap:
div {
font-size: 2em;
font-weight: bold;
white-space: pre-wrap;
}
Which give you the same output as with option 1:
The white-space property adjusts how an element handles white space in its inner text. And the value no-wrap preserves the white space, including line breaks.
You can read more about the white-space property and its different values here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
