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

既にある複数行の文字列に対して、各行の先頭と末尾に任意の文字列を自動追加したいことがあります。
例えば、各行を「カギ括弧」で括りたいとか、"引用符"を付加したいとか。
ここでは例として、textarea要素内に入力された複数行の文字列に対して、その各行の先頭と末尾に、ユーザが入力した任意の文字列を追加する方法を紹介します。

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

各行に対して何らかの処理をする……という場合は、とりあえず1行ずつ配列に格納してから、その配列の各項目に対して、ループを使って望みの処理をするのが分かりやすい気がします。いちいち配列に展開したり、その後に結合したりする処理の分、若干面倒ではありますが。でも、分かりやすいですし、応用も利きやすい気はします。「元々配列に格納されているデータ」に対して処理をするなら、この方法の方が楽かも知れません。

上記のサンプルでは、「上記の入力内容を、以下の各行の先頭・末尾に追加」ボタンを押すたびに、全行の先頭と末尾に指定の文字列(デフォルトでは二重カギ括弧記号)が挿入されます。
HTMLソースとJavaScriptソースは以下の通りです。

◆行頭に追加する文字列：<input type="text" size="30" id="sampleAddHead1" value="『">
◆行末に追加する文字列：<input type="text" size="30" id="sampleAddFoot1" value="』">
<input type="button" value="上記の入力内容を、以下の各行の先頭・末尾に追加" onclick="AddStringToEachLine();">
◆文字列リスト：
<textarea cols="30" rows="6" id="sampleTargetLines1">リンゴ
みかん
バナナ</textarea>

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

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

この例では、「textarea要素内に入力された文字列」を1行ずつ配列に格納して、その配列に対して1項目ずつ「行頭と行末に指定文字列を追加する」処理を施しています。
上記のソースでは、具体的には以下のような処理をしています。

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

以上です。
『最後の行が空行だった場合は、最後の行に対しては何も処理しない』という点に関しては、別途記事「すべての行頭に任意の文字列を追加する」や「すべての行末に任意の文字列を追加する」で説明しましたので、ここでは繰り返しません。

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

さて、textarea要素に入力された内容はプロパティ1つで一括取得が可能なので、replaceメソッドと正規表現を使うことでも同様の処理が実現できます。
1行の末尾には必ず「改行」があります。そして、「改行の直後」が「行の先頭」でもあります。
つまり、正規表現を使って、この「改行文字」を「末尾用の文字列＋改行文字＋先頭用の文字列」に置き換えることで、各行の先頭と末尾に任意の文字列を追加できます。
ただ、この方法だと最初と最後に1行だけ余計な文字列を追加してしまいますから、若干の工夫が必要です。
動作サンプルは以下の通りです。(動作は先ほどの配列版と同じです。)

上記のサンプルでも、『上記の入力内容を、以下の各行の先頭・末尾に追加』ボタンを押すたびに、全行の先頭と末尾に指定の文字列(デフォルトでは全角の小なり記号「＜」と大なり記号「＞」)が挿入されます。
HTMLソースとJavaScriptソースは以下の通りです。

◆行頭に追加する文字列：<input type="text" size="30" id="sampleAddHead" value="＜">
◆行末に追加する文字列：<input type="text" size="30" id="sampleAddFoot" value="＞">
<input type="button" value="上記の入力内容を、以下の各行の先頭・末尾に追加" onclick="AddStringToEachLine();">
◆文字列リスト：
<textarea cols="30" rows="6" id="sampleTargetLines">北海道
東京都
大阪府
</textarea>

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

function AddStringToEachLine() {
   // ユーザの入力を得る
   var UserStringHead = document.getElementById('sampleAddHead').value;
   var UserStringFoot = document.getElementById('sampleAddFoot').value;
   // 対象文字列を得る
   var TargetString = document.getElementById('sampleTargetLines').value;
   // 先頭に改行を付加
   TargetString = "\n" + TargetString;
   // 末尾に改行がなければ付加する
   if( TargetString[TargetString.length-1] != '\n' ) {
      TargetString += "\n";
   }
   // 改行部分を対象にして処理
   TargetString = TargetString.replace(/\n/g,(UserStringFoot + "\n" + UserStringHead));
   // 先頭に付加した余分な文字列を取り除く
   TargetString = TargetString.replace(/^.*?\n/,"");
   // 末尾に付加した余分な文字列を取り除く(最後の改行は残す)
   TargetString = TargetString.replace(/\n.*?$/,"\n");
   // 書き戻す
   document.getElementById('sampleTargetLines').value = TargetString;
}

上記のソースはもっと短く書けますが、どこで何をしているのかを見やすくするため、若干冗長に記述しています。実際に使う際には、まとめられる行はすべてまとめる方が良いでしょう。(^_^;)
このソースでは、以下のような処理をしています。

1. id名「sampleAddHead」の要素のvalueプロパティの値を、変数「UserStringHead」に格納。
2. id名「sampleAddFoot」の要素のvalueプロパティの値を、変数「UserStringFoot」に格納。
3. 変数「TargetString」内の文字列に対して、以下の処理を実行。
   • 先頭に改行「\n」を付加。(＝改行を対象にして一括置換することで文字列を加えるため、先頭にも改行が必要。先頭には余分な改行がないことが分かっているので、強制的に付加。)
   • 末尾に改行「\n」がない場合には付加。(＝同様の理由で、末尾にも改行が必要。末尾には改行が既にある可能性もあるため、改行があるかどうかを調べてから追加しています。)
4. 変数「TargetString」に含まれる改行「\n」を、『「UserStringFoot」＋「\n」＋「UserStringHead」』という文字列に置き換え。(これで、全行の先頭と末尾に文字列が追加されます。)
   上記ソース内の「TargetString.replace(/\n/g,(UserStringFoot + "\n" + UserStringHead));」の部分が、正規表現を使って文字列を置換している部分です。ここでは、
   • 文字列中に含まれるすべての改行(＝「/\n/g」)を、
   • 『行末用の文字列＋改行＋行頭用の文字列』の文字列(＝「((UserStringFoot + "\n" + UserStringHead)」)に

   書き換えています。

5. このままだと、1行目と最下行に余分な文字列が追加されてしまいますから、それらを削除します。ここでは、正規表現を使って、
   • 「文字列の先頭」から「最初の改行」までにある文字列を削除
     (＝正規表現で「^.*?\n」の部分)
   • 「最後の改行」から「文字列の末尾」までにある文字列を削除して、改行だけを残す
     (＝正規表現で「\n.*?$」の部分)

   という処理をしています。
   正規表現での「.*?」の「?」は『最短一致』の目的で記述していますが、なくても同様の意図通りに動くっぽいです。これはブラウザによるのかも知れないので、念のため付加しています。

6. 変数「TargetString」の内容を、id名「sampleTargetLines」の要素のvalueプロパティへ書き戻す。

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

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