Text To HTML CODE From Code Block

TextFormatPro: The Ultimate Browser-Based Text Editor

Introduction

TextFormatPro is a powerful browser-based text formatting tool that allows you to easily create, edit, and format text without the need for complex software installations. Whether you're drafting content for your blog, preparing documents, or simply organizing your thoughts, TextFormatPro provides all the essential formatting capabilities you need - directly in your web browser.

Why You Need TextFormatPro

In today's digital world, we often need to format text quickly without launching heavy applications. TextFormatPro addresses this need by offering:

1. Instant Accessibility: No downloads or installations required - just open it in your browser and start working
2. Cross-Platform Compatibility: Works on any device with a modern web browser
3. Zero Cost: A professional-grade text editor available completely free
4. Simplified Workflow: Convert plain text to formatted HTML with ease

Key Advantages

🚀 User-Friendly Interface

TextFormatPro features an intuitive, clean interface that anyone can use without a learning curve. All formatting tools are organized logically in a toolbar, making them easy to find and apply.

📱 Responsive Design

The tool works seamlessly across desktops, tablets, and mobile devices, ensuring you can format your text anywhere, anytime.

🔄 HTML Conversion

One of TextFormatPro's standout features is its ability to instantly convert your formatted text to HTML code. This is particularly valuable for bloggers and web content creators who need to prepare content for websites.

🎨 Rich Formatting Options

Despite its simplicity, TextFormatPro offers comprehensive formatting capabilities:

• Font selection and sizing
• Text styling (bold, italic, underline, strikethrough)
• Color options (by picker or name)
• Text alignment
• Link and image insertion
• Search and highlight functionality

💾 Easy Export

Save your work as HTML or plain text files with just a few clicks, making it simple to use your content elsewhere.

How to Use TextFormatPro

Getting Started

1. Loading Text: Either type directly into the editor or upload an existing text file using the "Upload Text File" button
2. Basic Formatting: Use the toolbar to apply formatting to selected text:
   • Change fonts and sizes from the dropdown menus
   • Apply bold, italic, underline, or strikethrough with one click
   • Change text or background colors using the color pickers

Advanced Features

Creating Links

1. Select the text you want to turn into a link (or place your cursor where you want the link)
2. Click the link icon in the toolbar
3. Enter the URL and optional link text in the popup dialog
4. Click "Insert Link"

Inserting Images

1. Place your cursor where you want to insert an image
2. Click the image icon in the toolbar
3. Enter the image URL, alt text, and optional width
4. Click "Insert Image"

Search and Highlight

1. Enter your search term in the search field
2. Click the search icon to highlight all instances
3. To highlight text between specific phrases, use the "Start" and "End" fields with the highlighter icon

HTML Output

The HTML code for your formatted text automatically appears in the "HTML Output" box as you work. You can:

• Copy the HTML code with the "Copy HTML" button
• Copy the formatted text with the "Copy Formatted Text" button
• Download your work as HTML or plain text using the "Download Output" button

Practical Applications

For Bloggers

TextFormatPro is perfect for preparing blog posts. Format your text just the way you want it, then copy the HTML to paste directly into your blog's HTML editor.

For Students

Create well-formatted notes, assignments, and documents without needing access to premium word processing software.

For Content Creators

Quickly format content for websites, social media posts, or emails with professional-looking results.

For Business Professionals

Draft formatted memos, reports, and communications that can be easily shared across different platforms.

Tips for Best Results

1. Use Color Names: Besides the color picker, you can type color names (like "crimson" or "teal") in the text field and apply them with the paintbrush icon
2. Highlight Important Sections: Use the phrase highlighting feature to make important parts of your text stand out
3. Check the HTML: For web content, review the generated HTML code to ensure it's structured correctly
4. Save Frequently: Download your work regularly to avoid losing changes if your browser closes unexpectedly

Conclusion

TextFormatPro combines simplicity with powerful functionality, making it an essential tool for anyone who works with text. Its browser-based nature means you'll always have access to professional text formatting capabilities wherever you are, without needing specialized software.

Try TextFormatPro today and experience how it streamlines your text formatting workflow!

Text To HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Cleaner - Remove Symbols and Format Titles</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .text-area {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        textarea {
            height: 400px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            resize: vertical;
        }
        label {
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        .button-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 20px 0;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .clear {
            background-color: #e74c3c;
        }
        .clear:hover {
            background-color: #c0392b;
        }
        .copy {
            background-color: #2ecc71;
        }
        .copy:hover {
            background-color: #27ae60;
        }
        .options {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        #status {
            text-align: center;
            height: 20px;
            margin-top: 10px;
            color: #27ae60;
        }
        .title-options {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #ddd;
        }
        .font-size-control {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        input[type="number"] {
            width: 60px;
            padding: 5px;
        }
        input[type="color"] {
            width: 40px;
            height: 30px;
            padding: 0;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        #outputPreview {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            max-height: 400px;
            overflow-y: auto;
        }
        .preview-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
        }
        .tab.active {
            background-color: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .color-control {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .download-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Text Cleaner Tool</h1>
    
    <div class="options">
        <label>Cleaning Options:</label>
        <div class="checkbox-group">
            <div class="checkbox-item">
                <input type="checkbox" id="removeHashtags" checked>
                <label for="removeHashtags">Remove # symbols</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="removeAsterisks" checked>
                <label for="removeAsterisks">Remove * symbols</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="removeUnderscores" checked>
                <label for="removeUnderscores">Remove _ symbols</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="removeBrackets" checked>
                <label for="removeBrackets">Remove [], () and {}</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="removeDashes" checked>
                <label for="removeDashes">Remove - and +</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="preserveBasicPunctuation" checked>
                <label for="preserveBasicPunctuation">Preserve basic punctuation (.,;:!?)</label>
            </div>
        </div>
        
        <div class="title-options">
            <div class="checkbox-item">
                <input type="checkbox" id="formatTitles" checked>
                <label for="formatTitles">Format titles and subtitles</label>
            </div>
            
            <div id="titleFormatOptions" style="margin-left: 20px; margin-top: 10px;">
                <div class="font-size-control">
                    <label for="titleSize">Title font size:</label>
                    <input type="number" id="titleSize" min="16" max="48" value="24">
                    <span>px</span>
                </div>
                
                <div class="color-control">
                    <label for="titleColor">Title color:</label>
                    <input type="color" id="titleColor" value="#2c3e50">
                </div>
                
                <div class="font-size-control">
                    <label for="subtitleSize">Subtitle font size:</label>
                    <input type="number" id="subtitleSize" min="14" max="32" value="20">
                    <span>px</span>
                </div>
                
                <div class="color-control">
                    <label for="subtitleColor">Subtitle color:</label>
                    <input type="color" id="subtitleColor" value="#3498db">
                </div>
                
                <div class="font-size-control">
                    <label for="normalTextSize">Normal text size:</label>
                    <input type="number" id="normalTextSize" min="12" max="24" value="16">
                    <span>px</span>
                </div>
                
                <div class="color-control">
                    <label for="normalTextColor">Normal text color:</label>
                    <input type="color" id="normalTextColor" value="#333333">
                </div>
                
                <div class="checkbox-item">
                    <input type="checkbox" id="applyBold" checked>
                    <label for="applyBold">Make titles and subtitles bold</label>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="text-area">
            <label for="inputText">Input Text (with symbols):</label>
            <textarea id="inputText" placeholder="Paste your text with symbols, hashtags, markdown formatting, etc. here..."></textarea>
        </div>
        
        <div class="text-area">
            <div class="tabs">
                <div class="tab active" id="rawTab">Raw Text</div>
                <div class="tab" id="previewTab">Formatted Preview</div>
                <div class="tab" id="htmlTab">HTML Code</div>
            </div>
            
            <div id="rawTabContent" class="tab-content active">
                <textarea id="outputText" placeholder="Your cleaned text will appear here..." readonly></textarea>
            </div>
            
            <div id="previewTabContent" class="tab-content">
                <div class="preview-title">Formatted Output Preview:</div>
                <div id="outputPreview"></div>
            </div>
            
            <div id="htmlTabContent" class="tab-content">
                <textarea id="outputHTML" placeholder="HTML code will appear here..." readonly></textarea>
            </div>
        </div>
    </div>
    
    <div class="button-group">
        <button id="cleanButton">Clean Text</button>
        <button id="copyButton" class="copy">Copy Clean Text</button>
        <button id="clearButton" class="clear">Clear All</button>
    </div>
    
    <div class="download-group">
        <button id="downloadTextButton">Download Text</button>
        <button id="downloadHTMLButton">Download HTML</button>
        <button id="downloadHTMLCodeButton">Download HTML Code</button>
    </div>
    
    <div id="status"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputText = document.getElementById('inputText');
            const outputText = document.getElementById('outputText');
            const outputHTML = document.getElementById('outputHTML');
            const outputPreview = document.getElementById('outputPreview');
            const cleanButton = document.getElementById('cleanButton');
            const copyButton = document.getElementById('copyButton');
            const clearButton = document.getElementById('clearButton');
            const downloadTextButton = document.getElementById('downloadTextButton');
            const downloadHTMLButton = document.getElementById('downloadHTMLButton');
            const downloadHTMLCodeButton = document.getElementById('downloadHTMLCodeButton');
            const status = document.getElementById('status');
            const formatTitles = document.getElementById('formatTitles');
            const titleFormatOptions = document.getElementById('titleFormatOptions');
            
            // Tab elements
            const rawTab = document.getElementById('rawTab');
            const previewTab = document.getElementById('previewTab');
            const htmlTab = document.getElementById('htmlTab');
            const rawTabContent = document.getElementById('rawTabContent');
            const previewTabContent = document.getElementById('previewTabContent');
            const htmlTabContent = document.getElementById('htmlTabContent');
            
            // Tab switching
            rawTab.addEventListener('click', function() {
                activateTab(rawTab, rawTabContent);
            });
            
            previewTab.addEventListener('click', function() {
                activateTab(previewTab, previewTabContent);
            });
            
            htmlTab.addEventListener('click', function() {
                activateTab(htmlTab, htmlTabContent);
            });
            
            function activateTab(tab, content) {
                // Deactivate all tabs
                [rawTab, previewTab, htmlTab].forEach(t => t.classList.remove('active'));
                [rawTabContent, previewTabContent, htmlTabContent].forEach(c => c.classList.remove('active'));
                
                // Activate selected tab
                tab.classList.add('active');
                content.classList.add('active');
            }
            
            // Toggle title formatting options
            formatTitles.addEventListener('change', function() {
                titleFormatOptions.style.display = this.checked ? 'block' : 'none';
            });
            
            // Function to detect if a line is a title or subtitle
            function isTitleOrSubtitle(line, originalText) {
                // Check for markdown headings in original text
                const lines = originalText.split('\n');
                for (let i = 0; i < lines.length; i++) {
                    const originalLine = lines[i].trim();
                    const cleanLine = originalLine.replace(/^#+\s+/, '').trim();
                    
                    if (cleanLine === line.trim()) {
                        // Count the number of # symbols
                        const hashCount = (originalLine.match(/^#+/) || [''])[0].length;
                        if (hashCount > 0) {
                            return hashCount === 1 ? 'title' : 'subtitle';
                        }
                    }
                }
                
                // Check for other title indicators
                if (line.length < 100 && (line.endsWith('?') || line.endsWith(':') || 
                    /^[A-Z][a-z]+(\s+[A-Z][a-z]+)+$/.test(line))) {
                    return 'subtitle';
                }
                
                return null;
            }
            
            // Function to generate HTML for a single line
            function generateLineHTML(line, lineType) {
                const titleSize = document.getElementById('titleSize').value;
                const subtitleSize = document.getElementById('subtitleSize').value;
                const normalTextSize = document.getElementById('normalTextSize').value;
                const titleColor = document.getElementById('titleColor').value;
                const subtitleColor = document.getElementById('subtitleColor').value;
                const normalTextColor = document.getElementById('normalTextColor').value;
                const applyBold = document.getElementById('applyBold').checked;
                
                let style = '';
                let color = normalTextColor;
                let fontSize = normalTextSize;
                let fontWeight = '';
                
                if (lineType === 'title') {
                    fontSize = titleSize;
                    color = titleColor;
                    fontWeight = applyBold ? 'font-weight: bold;' : '';
                } else if (lineType === 'subtitle') {
                    fontSize = subtitleSize;
                    color = subtitleColor;
                    fontWeight = applyBold ? 'font-weight: bold;' : '';
                }
                
                // Return both display HTML and the actual HTML code for downloading
                return {
                    displayHTML: `<div style="font-size: ${fontSize}px; color: ${color}; ${fontWeight} margin-bottom: 5px;">${line}</div>`,
                    codeHTML: `<font style="font-size: ${fontSize}px; ${fontWeight}" color="${color}">${line}</font><br>`
                };
            }
            
            // Function to clean the text and identify titles/subtitles
            function cleanText() {
                let text = inputText.value;
                const originalText = inputText.value;
                
                if (!text) {
                    status.textContent = "Please enter some text to clean";
                    setTimeout(() => { status.textContent = ""; }, 3000);
                    return;
                }
                
                const removeHashtags = document.getElementById('removeHashtags').checked;
                const removeAsterisks = document.getElementById('removeAsterisks').checked;
                const removeUnderscores = document.getElementById('removeUnderscores').checked;
                const removeBrackets = document.getElementById('removeBrackets').checked;
                const removeDashes = document.getElementById('removeDashes').checked;
                const preserveBasicPunctuation = document.getElementById('preserveBasicPunctuation').checked;
                
                // Remove markdown headings (hash symbols)
                if (removeHashtags) {
                    text = text.replace(/^#+\s*/gm, '');
                }
                
                // Remove asterisks (bold/italic in markdown)
                if (removeAsterisks) {
                    text = text.replace(/\*/g, '');
                }
                
                // Remove underscores (italic/bold in markdown)
                if (removeUnderscores) {
                    text = text.replace(/_/g, '');
                }
                
                // Remove brackets
                if (removeBrackets) {
                    text = text.replace(/[\[\]\(\)\{\}]/g, '');
                }
                
                // Remove dashes and plus signs
                if (removeDashes) {
                    text = text.replace(/[-+]/g, '');
                }
                
                // Clean up other markdown/formatting elements
                text = text.replace(/`/g, ''); // Remove code ticks
                
                // HTML-like tags (e.g., <tag>)
                text = text.replace(/<[^>]*>/g, '');
                
                // Clean up extra spaces while preserving line breaks
                text = text.split('\n').map(line => line.trim()).join('\n');
                
                // Special case for numbered lists (preserve numbers)
                text = text.replace(/(\d+\.\s*)/g, '$1');
                
                // Special case for removing horizontal rules
                text = text.replace(/---+/g, '');
                
                // Clean up whitespace but preserve line breaks
                text = text.split('\n').map(line => line.trim()).filter(line => line).join('\n');
                
                // Restore basic punctuation if needed
                if (!preserveBasicPunctuation) {
                    text = text.replace(/[.,;:!?]/g, '');
                }
                
                outputText.value = text;
                
                // Create formatted HTML preview and HTML code
                let htmlOutput = '';
                let htmlCode = '';
                
                const lines = text.split('\n');
                
                for (let i = 0; i < lines.length; i++) {
                    const line = lines[i];
                    if (!line.trim()) continue;
                    
                    const lineType = formatTitles.checked ? isTitleOrSubtitle(line, originalText) : null;
                    const formattedLine = generateLineHTML(line, lineType);
                    
                    htmlOutput += formattedLine.displayHTML;
                    htmlCode += formattedLine.codeHTML;
                }
                
                outputPreview.innerHTML = htmlOutput;
                outputHTML.value = htmlCode;
                
                status.textContent = "Text cleaned successfully!";
                setTimeout(() => { status.textContent = ""; }, 3000);
            }
            
            // Function to download with custom filename
            function downloadFileWithCustomName(blob, defaultFileName, fileType) {
                // Create a dialog to get custom filename
                const fileName = prompt(`Enter a name for your ${fileType}:`, defaultFileName);
                
                // If user cancels the prompt, use the default filename
                const finalFileName = fileName || defaultFileName;
                
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = finalFileName;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
            
            // Event listeners for download buttons
            downloadTextButton.addEventListener('click', function() {
                if (!outputText.value) {
                    status.textContent = "No text to download";
                    setTimeout(() => { status.textContent = ""; }, 3000);
                    return;
                }
                
                const blob = new Blob([outputText.value], {type: 'text/plain'});
                downloadFileWithCustomName(blob, 'cleaned_text.txt', 'Text');
                
                status.textContent = "Text file downloaded!";
                setTimeout(() => { status.textContent = ""; }, 3000);
            });
            
            downloadHTMLButton.addEventListener('click', function() {
                if (!outputPreview.innerHTML) {
                    status.textContent = "No formatted content to download";
                    setTimeout(() => { status.textContent = ""; }, 3000);
                    return;
                }
                
                const normalTextColor = document.getElementById('normalTextColor').value;
                
                const htmlContent = `
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Formatted Text</title>
                    <style>
                        body {
                            font-family: Arial, sans-serif;
                            max-width: 800px;
                            margin: 0 auto;
                            padding: 20px;
                            line-height: 1.6;
                            color: ${normalTextColor};
                        }
                    </style>
                </head>
                <body>
                    ${outputPreview.innerHTML}
                </body>
                </html>
                `;
                
                const blob = new Blob([htmlContent], {type: 'text/html'});
                downloadFileWithCustomName(blob, 'formatted_text.html', 'HTML File');
                
                status.textContent = "HTML file downloaded!";
                setTimeout(() => { status.textContent = ""; }, 3000);
            });
            
            downloadHTMLCodeButton.addEventListener('click', function() {
                if (!outputHTML.value) {
                    status.textContent = "No HTML code to download";
                    setTimeout(() => { status.textContent = ""; }, 3000);
                    return;
                }
                
                // This creates a plain text file containing the HTML code
                // rather than an actual HTML file
                const blob = new Blob([outputHTML.value], {type: 'text/plain'});
                downloadFileWithCustomName(blob, 'html_code.txt', 'HTML Code');
                
                status.textContent = "HTML code downloaded!";
                setTimeout(() => { status.textContent = ""; }, 3000);
            });
            
            // Event listeners
            cleanButton.addEventListener('click', cleanText);
            
            copyButton.addEventListener('click', function() {
                // Determine which content to copy based on active tab
                let contentToCopy = '';
                
                if (rawTabContent.classList.contains('active')) {
                    contentToCopy = outputText.value;
                } else if (htmlTabContent.classList.contains('active')) {
                    contentToCopy = outputHTML.value;
                } else {
                    // For preview tab, copy text
                    contentToCopy = outputText.value;
                }
                
                if (!contentToCopy) {
                    status.textContent = "Nothing to copy";
                    setTimeout(() => { status.textContent = ""; }, 3000);
                    return;
                }
                
                // Create a temporary textarea to handle the copy operation
                const tempTextarea = document.createElement('textarea');
                tempTextarea.value = contentToCopy;
                document.body.appendChild(tempTextarea);
                tempTextarea.select();
                document.execCommand('copy');
                document.body.removeChild(tempTextarea);
                
                status.textContent = "Copied to clipboard!";
                setTimeout(() => { status.textContent = ""; }, 3000);
            });
            
            clearButton.addEventListener('click', function() {
                inputText.value = "";
                outputText.value = "";
                outputHTML.value = "";
                outputPreview.innerHTML = "";
                status.textContent = "All text cleared";
                setTimeout(() => { status.textContent = ""; }, 3000);
            });
            
            // Auto-clean when text is pasted
            inputText.addEventListener('paste', function() {
                setTimeout(cleanText, 100); // Small delay to ensure paste completes
            });
            
            // Update preview when formatting options change
            const updateElements = [
                'titleSize', 'subtitleSize', 'normalTextSize', 
                'titleColor', 'subtitleColor', 'normalTextColor', 
                'applyBold', 'removeHashtags', 'removeAsterisks',
                'removeUnderscores', 'removeBrackets', 'removeDashes',
                'preserveBasicPunctuation', 'formatTitles'
            ];
            
            updateElements.forEach(id => {
                document.getElementById(id).addEventListener('change', cleanText);
            });
        });
    </script>
</body>
</html>