JavaScript超初心者向け splitメソッドを使って<textarea>に入力された文字列を1行ずつ配列に入れる

HTML5

JavaScript

今回学べること

・改行で分割して配列に入れる。
（string.split(/\r\n|\r|\n/))

サンプル

textareaの要素を取得するのは前回つくった。

今回からは要素を取得し、手を加えていくので
ファイル名をget-textarea.jsからconvert-textarea.jsに変更。
他は一緒。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>textareaに入力された文字列を変換する</title>
</head>

<body>
  <textarea id="js-area"></textarea>
  <button id="js-output-console">Consoleへ表示する</button>
  <script src="./convert-textarea.js"></script>
</body>

</html>


/*
  textareaを取得する関数。
 */
const getTextarea = () => {
  return document.getElementById('js-area').value;
};

/*
  クリックされたときに起こる。
  前回取得したtextareaのvalueをspliteStringLineFeed関数に渡す。
  それをconsole.logで表示する。
 */
document.getElementById('js-output-console').onclick = () => {
  const textareaValue = getTextarea();
  const splitTextareaArray = splitStringLinefeed(textareaValue);
  console.log(splitTextareaArray);
};


/*
  ある文字列（string）を与えられると、改行して配列に入れる関数。
  stringという引数をsplitする。
  splitするだけの関数なので、わざわざ定数には入れずそのままreturnした。
  splitは、指定した区切り文字で文字列を区切ってくれるメソッド。
  今回は\r\nとか\rとか\nで区切ってくれる。これは正規表現で改行（Linefeed,LineBreak）を表す。
  CR・LF・CR+LFなど様々な改行に対応させる。
  他にも空白で区切ったりとか、カンマで区切ったりとか、いろいろできる。
*/
const splitStringLinefeed = (string) => {
  return string.split(/\r\n|\r|\n/);
};