複数行の文字列を逆順に並び替える方法

ユーザが入力した文字列や、配列などに格納してある文字列の順序を、ひっくり返して逆順に並び替えたいことがあります。
例えば、時系列順(昇順)に並んでいるものを、新しいもの順(降順)に並び替えて表示したい場合などです。
JavaScriptでは、「reverseメソッド」を使うことで、簡単に配列の順序を逆順に並び替えられます。ものすごく簡単です。
したがって、

1. 逆順に並び替えたい文字列を、とりあえず配列に格納する。
2. その配列に対して、reverseメソッドを使って逆順にする。
3. その配列を望みの形式に変換して使用(出力など)する。

という手順で簡単に逆順に並び替えられます。

複数行の文字列を逆順に並び替えるサンプル

以下のテキストエリアに適当な文字列を複数行ほど入力してから、下部の「全行を逆順に並び替える」ボタンを押すと、すべての行がひっくり返って逆順に並びます。ボタンを押すたびに何度でも逆順に並び変わります。

上記のサンプルを使うと、入力されたすべての行を対象に、逆順に並び変わります。
先に、上記のサンプルを実現するJavaScriptソースを解説しておきます。

複数行の文字列を逆順に並び替える方法ためのJavaScriptソース

先ほどの逆順に並び替える処理は、以下のJavaScriptソースで作っています。単に(JavaScriptに最初から存在する)reverseソッドをそのまま呼び出しているだけなので、とても短いコードです。

function ReverseAllLines() {
   // textareaの内容を改行で分割して配列に格納
   var targetArray = document.getElementById('sampleTargetLines').value.split("\n");
   // 逆順にする
   var sortedArray = targetArray.reverse();
   // ソート結果を書き戻す
   document.getElementById('sampleTargetLines').value = sortedArray.join("\n");
}

文字列の入力・出力用として、以下のHTMLを用意しています。textarea要素には、JavaScript側から中身(文字列)を扱うために、id属性でid名「sampleTargetLines」を割り振っています。

◆文字列リスト：
<br><textarea cols="30" rows="6" id="sampleTargetLines">昔々あるところに
お爺さんとお婆さんが居ました
お爺さんは山へ芝刈りに
お婆さん川へ洗濯に
川から大きな桃が流れてきました
お婆さんはその桃を持って帰りました</textarea><br>
<input type="button" value="全行を逆順に並び替える" onclick="ReverseAllLines();">

上記のソースによって、「全行を逆順に並び替える」ボタンをクリックすると、テキストエリアに入力した複数行の文字列が逆順に並び変わる機能ができがあります。
ここでやっていることは、単に「配列に対してreverseメソッドを使う」というだけなので、非常に簡単です。

というわけで、複数行の文字列を逆順に並び替える方法でした。

(更新日：2017年06月18日)