Let’s be real: pipe-separated lists (apple|banana|cherry|date) are the worst when you need to turn them into proper columns for Excel or Google Sheets. I used to spend way too much time fussing with “Find and Replace” and awkward copy-pastes—so, I finally sat down and built a simple web tool that fixes this in seconds.
Why I Built This
The problem? I kept getting data from websites and exports where all the words were jammed together with | pipes. I wanted a fast way to get them lined up in a nice CSV column, so I could drop them into my workflow without a second thought.
What the Tool Does
Paste your pipe-separated list in, click a button, and voilà! It spits out a vertical column—ready for download. You even get a preview and a quick word count. No manual editing, no headaches.
Behind the Scenes
Here’s how I put it together:
-
Clean Interface:
I wanted it to be super clear—just a big textarea, three buttons (“Convert,” “Clear,” and “Download”), plus a preview of your converted list. -
Nice Styling:
No raw HTML here. There’s a blue-purple gradient background, rounded corners, and responsive design. I like my tools to feel friendly! -
Conversion Logic:
JavaScript does the work. It splits your input by pipes, trims the pieces, and stacks them one word per line. If your input is empty, it lets you know. -
Download Function:
With one click, you get a CSV file that just works—no extra steps.
Try It Yourself
If you want to use it, copy the code below, save it as pipe-to-csv-converter.html, and open it in your browser. Seriously, it takes less than a minute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pipe to CSV Converter</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
max-width: 600px;
width: 100%;
}
textarea {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
resize: vertical;
min-height: 150px;
font-family: 'Courier New', monospace;
transition: border-color 0.3s;
}
button {
flex: 1;
padding: 15px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.convert-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.clear-btn {
background: #e0e0e0;
color: #555;
}
.download-btn {
background: #10b981;
color: white;
display: none;
}
.download-btn.show {
display: block;
}
.preview {
margin-top: 20px;
display: none;
}
.preview.show {
display: block;
}
.preview-content {
background: #f9fafb;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
max-height: 200px;
overflow-y: auto;
font-family: 'Courier New', monospace;
font-size: 14px;
color: #333;
}
.word-count {
text-align: center;
color: #667eea;
font-weight: 600;
margin-top: 15px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>🔄 Pipe to CSV Converter</h1>
<textarea id="inputText" placeholder="apple|banana|cherry|date"></textarea>
<button class="convert-btn" onclick="convertToCSV()">Convert to CSV</button>
<button class="clear-btn" onclick="clearAll()">Clear All</button>
<button class="download-btn" id="downloadBtn" onclick="downloadCSV()">📥 Download CSV File</button>
<div class="preview" id="preview">
<div class="preview-label">Preview:</div>
<div class="preview-content" id="previewContent"></div>
</div>
<div class="word-count" id="wordCount"></div>
</div>
<script>
let csvContent = '';
function convertToCSV() {
const input = document.getElementById('inputText').value.trim();
if (!input) {
alert('Please enter some pipe-separated words!');
return;
}
const words = input.split('|').map(word => word.trim()).filter(word => word !== '');
csvContent = words.join('\n');
document.getElementById('previewContent').textContent = csvContent;
document.getElementById('preview').classList.add('show');
document.getElementById('downloadBtn').classList.add('show');
document.getElementById('wordCount').textContent = `✓ ${words.length} word${words.length !== 1 ? 's' : ''} converted successfully!`;
}
function downloadCSV() {
if (!csvContent) {
alert('Please convert some text first!');
return;
}
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.setAttribute('href', URL.createObjectURL(blob));
link.setAttribute('download', 'words-column.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function clearAll() {
document.getElementById('inputText').value = '';
document.getElementById('preview').classList.remove('show');
document.getElementById('downloadBtn').classList.remove('show');
document.getElementById('wordCount').textContent = '';
csvContent = '';
}
document.getElementById('inputText').addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
e.preventDefault();
convertToCSV();
}
});
</script>
</body>
</html>
Let Me Know What You Think
If you try it out, drop me a note! And if you have cool features in mind, definitely let me know. Hope this saves you as much time as it’s saved me.