File size: 3,257 Bytes
169cd1a 98185b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!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) {
// Unicode code points ๋จ์๋ก ์์ ํ๊ฒ ๋ถํ
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>
|