|
|
<!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> |
|
|
|
