| <!DOCTYPE html> |
| <html lang="ko"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>4000์ ๋จ์ ๋ถํ ๊ธฐ</title> |
| <style> |
| body { font-family: Arial, sans-serif; padding: 20px; } |
| textarea { width: 100%; height: 180px; resize: vertical; } |
| .chunk { border: 1px solid #ccc; padding: 8px; margin: 8px 0; border-radius: 6px; background: #f9f9f9; } |
| pre { margin: 6px 0 0 0; white-space: pre-wrap; word-break: break-word; } |
| .toolbar { margin-bottom: 8px; } |
| </style> |
| </head> |
| <body> |
| <h1>4000์ ๋จ์ ๋ถํ ๊ธฐ</h1> |
| <p>ํ
์คํธ๋ฅผ ์
๋ ฅํ๊ณ ์๋ ๋ฒํผ์ ๋๋ฌ 4000๊ธ์์ฉ ๋ถํ ํฉ๋๋ค.</p> |
| <div class="toolbar"> |
| <textarea id="input" placeholder="์ฌ๊ธฐ์ ํ
์คํธ๋ฅผ ์
๋ ฅํ์ธ์"></textarea> |
| <br/> |
| <button id="splitBtn">4000์ ๋จ์๋ก ๋ถํ </button> |
| <button id="clearBtn" type="button">์ด๊ธฐํ</button> |
| </div> |
| <div id="output" aria-live="polite"></div> |
|
|
| <script> |
| (function(){ |
| const input = document.getElementById('input'); |
| const splitBtn = document.getElementById('splitBtn'); |
| const clearBtn = document.getElementById('clearBtn'); |
| const output = document.getElementById('output'); |
| const CHUNK = 4000; |
| |
| function chunkText(text) { |
| |
| const cps = Array.from(text); |
| const chunks = []; |
| for (let i = 0; i < cps.length; i += CHUNK) { |
| chunks.push(cps.slice(i, i + CHUNK).join('')); |
| } |
| return chunks; |
| } |
| |
| function renderChunks(chunks) { |
| output.innerHTML = ''; |
| if (!chunks.length) return; |
| const ol = document.createElement('ol'); |
| chunks.forEach((chunk, idx) => { |
| const li = document.createElement('li'); |
| li.className = 'chunk'; |
| const header = document.createElement('div'); |
| header.style.fontWeight = 'bold'; |
| header.textContent = `Chunk ${idx + 1} (${chunk.length} chars)`; |
| const pre = document.createElement('pre'); |
| pre.textContent = chunk; |
| const copyBtn = document.createElement('button'); |
| copyBtn.textContent = 'ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ'; |
| copyBtn.style.marginLeft = '8px'; |
| copyBtn.addEventListener('click', async () => { |
| try { |
| await navigator.clipboard.writeText(chunk); |
| copyBtn.textContent = '๋ณต์ฌ๋จ'; |
| setTimeout(() => { copyBtn.textContent = 'ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ'; }, 1500); |
| } catch (e) { |
| copyBtn.textContent = '์คํจ'; |
| setTimeout(() => { copyBtn.textContent = 'ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ'; }, 1500); |
| } |
| }); |
| li.appendChild(header); |
| li.appendChild(pre); |
| li.appendChild(copyBtn); |
| ol.appendChild(li); |
| }); |
| output.appendChild(ol); |
| } |
| |
| splitBtn.addEventListener('click', () => { |
| const text = input.value; |
| const chunks = chunkText(text); |
| renderChunks(chunks); |
| }); |
| |
| clearBtn.addEventListener('click', () => { |
| input.value = ''; |
| output.innerHTML = ''; |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
|
|
