Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:45.

すべての行末に任意の文字列を追加する

既にある複数行の文字列に対して、各行の末尾に任意の文字列を自動追加したいことがあります。
ここでは例として、textarea要素内に入力された複数行の文字列に対して、その各行の末尾に、ユーザが入力した任意の文字列を追加する方法を紹介します。

textarea要素に入力された内容は、プロパティ1つで一括取得が可能なので、replaceメソッドと正規表現を使うと、短いスクリプトで済みます。
ただ、この手の処理は、既に配列に格納された文字列に対して、1つ1つ処理を実行したい場合も多い気がします。
というわけで、「正規表現を使って一括置換する」方法と、「配列に格納してから1項目ずつループさせて置換する」方法の2通りを解説してみます。

まずは、短い記述量で済む正規表現版から。

テキストエリア内の各行末に、指定した文字列を追加する (正規表現使用版)

対象の文字列がtextarea要素内にあるのであれば、textarea要素のvalueプロパティに対して、replaceメソッドを使うのが楽です。1行の末尾には必ず「改行」がありますから、正規表現を使って、この「改行文字」を置き換えることで、行末に任意の文字列を追加できます。

動作サンプルは以下の通りです。

◆ユーザの入力欄:



◆文字列リスト:

上記のサンプルでは、『上記の入力内容を、以下の各行の末尾に追加』ボタンを押すたびに、全行末に指定の文字列(デフォルトでは「です!」)が挿入されます。押すたびにどんどん挿入されます。(^_^;)

※最後の行末では必ず改行して下さい。改行がないと、処理対象になりません。(最後に改行がなくても処理対象にしたい場合は、事前に「改行がなければ改行を加える」という処理をしておくと良いでしょう。ここでは、そこまではしていません。^^;)

HTMLソースとJavaScriptソースは以下の通りです。

■HTMLソース:

◆ユーザの入力欄:<input type="text" size="30" id="sampleUserInput" value="です!" />
<input type="button" value="上記の入力内容を、以下の末尾に追加" onclick="AddStringToEachLine();" />
◆文字列リスト:<textarea cols="30" rows="6" id="sampleTargetLines">北海道
東京都
大阪府
</textarea>

最初にinput要素で入力欄を作り、次にinput要素でボタンを作り、最後にtextarea要素で結果表示欄を作っています。textarea要素にはダミーの文字列を3行ほど記述しています。なお、入力欄の装飾に関する記述は省略しています。
スクリプトから利用するため、ユーザが入力するためのinput要素には「sampleUserInput」というid名を、表示結果のtextarea要素には「sampleTargetLines」というid名を、それぞれ加えています。
ボタンがクリックされると、この後で作成する関数「AddStringToEachLine」が実行されます。

■JavaScriptソース:

function AddStringToEachLine() {
   var UserString = document.getElementById('sampleUserInput').value;
   document.getElementById('sampleTargetLines').value = document.getElementById('sampleTargetLines').value.replace(/\n/g,(UserString + "\n"));
}

上記のソースでは、以下のような処理をしています。

  1. id名「sampleUserInput」の要素のvalueプロパティの値を、変数「UserString」に格納。
  2. id名「sampleTargetLines」の要素のvalueプロパティの値に含まれる改行「\n」を、『変数「UserString」の内容に改行「\n」を加えた文字列』に置き換え。

上記ソース内の「replace(/\n/g,(UserString + "\n"))」の部分が、正規表現を使って文字列を置換している部分です。
ここでは、

  • 文字列中に含まれるすべての改行(=「/\n/g」)を、
  • 『ユーザが指定した文字列+改行』の文字列(=「(UserString + "\n")」)に

書き換えています。
単に「UserString」に置き換えただけだと、改行がなくなってしまうので注意して下さい。「UserString + "\n"」のように記述して、「改行」→「指定文字+改行」のように置き換える必要があります。

さて、次に配列版です。

テキストエリア内の各行末に、指定した文字列を追加する (配列版)

各行に対して何らかの処理をする……という場合は、とりあえず1行ずつ配列に格納してから、その配列の各項目に対して、ループを使って望みの処理をするのが分かりやすい気がします。いちいち配列に展開したり、その後に結合したりする処理の分、記述量が増えますし、書くのが面倒ではありますが。でも、分かりやすいですし、応用も利きやすい気はします。

表示例は以下の通りです。見た目は、先ほどの例と何も変わりません。

◆ユーザの入力欄:



◆文字列リスト:

上記のサンプルでは、『上記の入力内容を、以下の各行の末尾に追加』ボタンを押すたびに、全行の先頭に指定の文字列(デフォルトでは「♪」記号)が挿入されます。押すたびにどんどん挿入されます。(^_^;)

この例では、「textarea要素内に入力された文字列」を1行ずつ配列に格納して、その配列に対して1項目ずつ「行末に指定文字列を追加する」処理を施しています。(ここでは、textarea要素の内容を操作しているので若干ソースが長いですが、「元々配列に格納されているデータ」に対して処理をするなら、もっと短いソースで済むでしょう。)

HTMLソースとJavaScriptソースは以下の通りです。

■HTMLソース:

◆ユーザの入力欄:<input type="text" size="30" id="sampleUserInput" value="♪" />
<input type="button" value="上記の入力内容を、以下の各行の末尾に追加" onclick="AddStringToEachLine();" />
◆文字列リスト:<textarea cols="30" rows="6" id="sampleTargetLines">リンゴ
みかん
バナナ</textarea>

最初にinput要素で入力欄を作り、次にinput要素でボタンを作り、最後にtextarea要素で結果表示欄を作っています。textarea要素にはダミーの文字列を3行ほど記述しています。なお、入力欄の装飾に関する記述は省略しています。
スクリプトから利用するため、ユーザが入力するためのinput要素には「sampleUserInput」というid名を、表示結果のtextarea要素には「sampleTargetLines」というid名を、それぞれ加えています。
ボタンがクリックされると、この後で作成する関数「AddStringToEachLine」が実行されます。

■JavaScriptソース:

function AddStringToEachLine() {
   // ユーザの入力得る
   var UserString = document.getElementById('sampleUserInput').value;
   // textareaの内容を改行で分割して配列に格納
   var nowArray = document.getElementById('sampleTargetLines').value.split("\n");
   // 各行を対象にして処理
   var retString = "";
   for( var i=0 ; i < nowArray.length ; i++ ) {
      if( !(i == nowArray.length-1 && nowArray[i].length == 0) ) {
         // 「最後の空行」以外なら処理を行う
         retString += nowArray[i] + UserString + "\n";
      }
   }
   // 表示
   document.getElementById('sampleTargetLines').value = retString;
}

上記のソースでは、以下のような処理をしています。

  1. id名「sampleUserInput」の要素のvalueプロパティの値を、変数「UserString」に格納。
  2. id名「sampleTargetLines」の要素のvalueプロパティの値を、改行「\n」で区切って分割し、配列「nowArray」へ格納。
  3. 配列内をループして、各行に対して処理。
    処理後の配列をすべて結合した文字列を、変数「retString」に格納。
    その際、
    • 最後の行が空行だった場合は、最後の行に対しては何も処理しない。
    • 最後の行以外や、最後の行でも空行ではない場合は、「現在の文字列」に変数「sampleUserInput」の内容を追加。(※元通り1項目1行で表示させるために、改行「\n」も付加。)
  4. id名「sampleTargetLines」の要素のvalueプロパティの値に、変数「retString」の中身を代入。

以上です。

若干ややこしいですが、『最後の行が空行だった場合は、最後の行に対しては何も処理しない』という点は、

if( !( i == nowArray.length-1 && nowArray[i].length == 0 ) ) {

というif文で実現しています。
これは、

  • 「i == nowArray.length-1」 :現在のループが「最後の行」を対象にしている場合
  • 「nowArray[i].length == 0」 :その配列項目に含まれる文字列が0文字(=空行)だった場合
  • 「 !( …… ) 」 :それらの否定 (=この条件に合致しない場合にだけ処理をする)

という意味です。
※配列「nowArray」内の項目数は「nowArray.length」で分かりますが、添え字は0から始まるので、「nowArray.length-1」が「最後の項目番号」になります。

実際に試してみると分かりますが、この条件指定がなければ、処理を実行するたびに余計な行がどんどん追加されてしまいます。(^_^;)

というわけで、複数行の文字列を対象にして、すべての行末に任意の文字列を加える方法でした。

なお、行末ではなく行頭に文字列を加える方法は、別途「すべての行頭に任意の文字列を追加する」で解説していますので、併せてご参照下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど