にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

複数行の文字列を逆順に並び替える方法 [計算・変換]

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

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

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

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

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

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

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

◆文字列リスト:

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

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

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

JavaScriptソース

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」を割り振っています。

HTMLソース

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

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---