Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Formatter & Auto-Indenter</title> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| line-height: 1.6; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f4f4f9; | |
| } | |
| .container { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| margin-top: 0; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 300px; | |
| padding: 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-size: 16px; | |
| box-sizing: border-box; | |
| resize: vertical; | |
| margin-bottom: 20px; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border: none; | |
| border-radius: 4px; | |
| transition: background 0.2s; | |
| } | |
| .btn-primary { | |
| background-color: #007bff; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #0056b3; | |
| } | |
| .btn-secondary { | |
| background-color: #6c757d; | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #5a6268; | |
| } | |
| .stats { | |
| margin-top: 10px; | |
| font-size: 0.9em; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Text Auto-Indenter</h1> | |
| <p>Paste your messy text below. This tool removes non-standard characters and adds a 4-space indentation to every paragraph.</p> | |
| <textarea id="inputText" placeholder="Paste messy text here..."></textarea> | |
| <div class="controls"> | |
| <button class="btn-primary" onclick="formatText()">Format Text</button> | |
| <button class="btn-secondary" onclick="copyText()">Copy Result</button> | |
| <button class="btn-secondary" style="background-color: #dc3545;" onclick="clearText()">Clear</button> | |
| </div> | |
| <div class="stats" id="stats"></div> | |
| </div> | |
| <script> | |
| function formatText() { | |
| const textArea = document.getElementById('inputText'); | |
| let text = textArea.value; | |
| if (!text.trim()) return; | |
| // 1. Remove "random" characters often found in PDF/Web copy-pastes | |
| // Keeps standard alphanumeric, basic punctuation, and whitespace | |
| // Matches: letters, numbers, basic punctuation, and symbols like $%& | |
| text = text.replace(/[^\x20-\x7E\t\n\r\u201C\u201D\u2018\u2019\u2013\u2014]/g, ''); | |
| // 2. Normalize line breaks (handle CRLF and multiple empty lines) | |
| text = text.replace(/\r\n/g, "\n"); | |
| // 3. Split into paragraphs, trim whitespace from each, and filter out empty ones | |
| let paragraphs = text.split(/\n+/); | |
| // 4. Rebuild text with indentation | |
| const indentedText = paragraphs | |
| .map(para => para.trim()) | |
| .filter(para => para.length > 0) | |
| .map(para => " " + para) // Adds 4 spaces | |
| .join("\n\n"); | |
| textArea.value = indentedText; | |
| updateStats(indentedText); | |
| } | |
| function copyText() { | |
| const textArea = document.getElementById('inputText'); | |
| textArea.select(); | |
| document.execCommand('copy'); | |
| alert("Text copied to clipboard!"); | |
| } | |
| function clearText() { | |
| document.getElementById('inputText').value = ''; | |
| document.getElementById('stats').innerText = ''; | |
| } | |
| function updateStats(text) { | |
| const words = text.trim() ? text.trim().split(/\s+/).length : 0; | |
| document.getElementById('stats').innerText = `Words: ${words} | Characters: ${text.length}`; | |
| } | |
| </script> | |
| </body> | |
| </html> | |