JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<h1>Text to HTML Converter</h1>
<textarea id="inputText" placeholder="Paste your text here..."></textarea>
<br>
<button onclick="convertToHTML()">Convert</button>

<h3>Generated HTML:</h3>
<div id="output"></div>

CSS

body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }
        #output {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            white-space: pre-line;
        }

JavaScript

function convertToHTML() {
        const inputText = document.getElementById('inputText').value;
        const lines = inputText.split('\n');
        let resultHTML = '';
        let currentDiv = '';
        let currentUL = '';
        let currentSubUL = '';

        lines.forEach(line => {
            line = line.trim(); // Remove leading/trailing spaces

            if (line.startsWith('*')) {
                // Close previous structures
                if (currentUL) {
                    currentDiv += `<ul>${currentUL}</ul>`;
                    currentUL = '';
                }
                if (currentDiv) {
                    resultHTML += `<div>${currentDiv}</div>`;
                    currentDiv = '';
                }

                // Start a new div
                currentDiv = line.substring(1).trim();
            } else if (line.startsWith('~')) {
                // Add li to UL
                if (currentSubUL) {
                    currentUL += `<ul>${currentSubUL}</ul>`;
                    currentSubUL = '';
                }
                currentUL += `<li>${line.substring(1).trim()}</li>`;
            } else if (line.startsWith('#')) {
                // Add li to sub-UL
                currentSubUL += `<li>${line.substring(1).trim()}</li>`;
            }
        });

        // Close remaining open tags
        if (currentSubUL) {
            currentUL += `<ul>${currentSubUL}</ul>`;
        }
        if (currentUL) {
            currentDiv += `<ul>${currentUL}</ul>`;
        }
        if (currentDiv) {
            resultHTML += `<div>${currentDiv}</div>`;
        }

        document.getElementById('output').innerText = resultHTML;
        document.getElementById('output').innerHTML = resultHTML; // Render HTML
    }