JavaScript - 입력된 문자열 배열로 바꾸기 textarea

자바스크립트에서 입력한 텍스트를 배열로 만들어준다.

<h2>텍스트 입력 → 배열 변환</h2>

<textarea id="textInput" placeholder="input CGATS txt"></textarea>
<br>
<button id="convertBtn">배열로 변환</button>

<pre id="output"></pre>

<script>
document.getElementById('convertBtn').addEventListener('click', () => {
  const text = document.getElementById('textInput').value;
  const lines = text.split(/\r?\n/).filter(line => line.trim() !== '');
  document.getElementById('output').textContent = JSON.stringify(lines, null, 2);

  console.log("총 행 수:", lines.length);
  console.log("배열:", lines);
});
</script>

아래는 다른 용도로 응용하는 활용 예이다.

fetch 사용해서 텍스트란이 뭔가 데이터를 채우고 싶은 경우 로컬에서 가져오는 방법

<script>
window.addEventListener('DOMContentLoaded', async () => {
  const textarea = document.getElementById('textInput');

  // 예: 같은 서버에 있는 텍스트 파일 불러오기
  const response = await fetch('/data/example.txt');
  const text = await response.text();

  textarea.value = text;  // 미리 채워넣기
});
</script>

사용자가 입력한 데이터를 사용자의 브라우저에 저장된 LocalStorage 에서 저장하고 이 페이지를 다시 방문 시 불려오는 방법

<script>
const textarea = document.getElementById('textInput');

// 입력할 때마다 저장
textarea.addEventListener('input', () => {
  localStorage.setItem('savedText', textarea.value);
});

// 페이지 로드시 불러오기
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('savedText');
  if (saved) textarea.value = saved;
});
</script>

URL 주소 입력 제한이 풀려서 요즘은 URL 텍스트로 채워서 불려오는 방법

URL

/example.html?text=Hello+World

Javascript

<script>
window.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const txt = params.get('text');
  if (txt) document.getElementById('textInput').value = decodeURIComponent(txt);
});
</script>

연습 공간

언급한 첫 번째 스크립트를 첨부하였다.

텍스트 입력 → 배열 변환