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

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

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

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

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

上記のサンプルでは、『上記の入力内容を、以下の各行の末尾に追加』ボタンを押すたびに、全行末に指定の文字列(デフォルトでは「です！」)が挿入されます。押すたびにどんどん挿入されます。(^_^;)
※最後の行末では必ず改行して下さい。改行がないと、処理対象になりません。(最後に改行がなくても処理対象にしたい場合は、事前に「改行がなければ改行を加える」という処理をしておくと良いでしょう。ここでは、そこまではしていません。^^;)
HTMLソースとJavaScriptソースは以下の通りです。

◆ユーザの入力欄：<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」が実行されます。

function AddStringToEachLine() {
   var UserString = document.getElementById('sampleUserInput').value;
   var TargetList = document.getElementById('sampleTargetLines');
   TargetList.value = TargetList.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ソースは以下の通りです。

◆ユーザの入力欄：<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」が実行されます。

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」が「最後の項目番号」になります。実際に試してみると分かりますが、この条件指定がなければ、処理を実行するたびに余計な行がどんどん追加されてしまいます。(^_^;)

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

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