JavaScript超初心者向け splitメソッドを使って<textarea>に入力された文字列を1行ずつ配列に入れる
今回学べること
・改行で分割して配列に入れる。
（string.split(/\r\n|\r|\n/))
サンプル
今回からは要素を取得し、手を加えていくので
ファイル名を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/);
};