Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert comma separated text in div into separate lines with JavaScript?
Converting comma-separated text in a div into separate lines is a common requirement in web development. This can be achieved using JavaScript's string manipulation methods along with DOM manipulation.
Let's say we have the following comma-separated text in a div:
<div class="commaSeparated"> This,is,the,first,JavaScript,program </div>
To convert comma-separated text into separate lines, we need to use trim() along with split() based on the comma separator.
Method 1: Converting to List Items
This approach splits the comma-separated text and converts each item into a list element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comma Separated to Lines</title>
</head>
<body>
<div class="commaSeparated">
This,is,the,first,JavaScript,program
</div>
<script>
var allTheData = document.querySelector('.commaSeparated').textContent.trim().split(',');
var separateList = '<ul>';
allTheData.forEach(function(value) {
separateList += '<li>' + value + '</li>';
});
separateList += '</ul>';
document.querySelector(".commaSeparated").innerHTML = separateList;
</script>
</body>
</html>
Method 2: Converting to Line Breaks
This approach replaces commas with HTML line breaks to display text on separate lines:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comma to Line Breaks</title>
</head>
<body>
<div class="commaSeparated">
Apple,Orange,Banana,Mango,Grapes
</div>
<script>
var textContent = document.querySelector('.commaSeparated').textContent.trim();
var linesWithBreaks = textContent.split(',').join('<br>');
document.querySelector('.commaSeparated').innerHTML = linesWithBreaks;
</script>
</body>
</html>
How It Works
The conversion process involves these key steps:
-
Select the element: Use
document.querySelector()to get the div containing comma-separated text -
Extract and clean text: Use
textContent.trim()to get clean text without extra whitespace -
Split the text: Use
split(',')to create an array of individual items - Convert to desired format: Either create list items or join with line breaks
- Update the DOM: Replace the original content with the formatted version
Output
The first method will display the text as a bulleted list:
? This ? is ? the ? first ? JavaScript ? program
The second method will display each item on a separate line without bullets.
Comparison
| Method | Output Format | Best For |
|---|---|---|
| List Items (<ul>/<li>) | Bulleted list | Structured data presentation |
| Line Breaks (<br>) | Plain text lines | Simple text formatting |
Conclusion
Converting comma-separated text to separate lines enhances readability and presentation. Use the list method for structured data or line breaks for simple text formatting based on your specific requirements.
3K+ Views
