《 1:30 PM 公開/更新》
すべての行頭・行末にそれぞれ任意の文字列を加える方法を解説。textarea要素内に入力された複数行の文字列を対象にして、ユーザが入力した任意の文字を1行ずつ先頭と末尾に加えます。配列に格納してからループで処理する方法と、正規表現を使う方法との2通りを掲載しています。
既にある複数行の文字列に対して、各行の先頭と末尾に任意の文字列を自動追加したいことがあります。
例えば、各行を「カギ括弧」で括りたいとか、"引用符"を付加したいとか。
ここでは例として、textarea要素内に入力された複数行の文字列に対して、その各行の先頭と末尾に、ユーザが入力した任意の文字列を追加する方法を紹介します。
各行に対して何らかの処理をする……という場合は、とりあえず1行ずつ配列に格納してから、その配列の各項目に対して、ループを使って望みの処理をするのが分かりやすい気がします。いちいち配列に展開したり、その後に結合したりする処理の分、若干面倒ではありますが。でも、分かりやすいですし、応用も利きやすい気はします。「元々配列に格納されているデータ」に対して処理をするなら、この方法の方が楽かも知れません。
◆行頭に追加する文字列:
◆行末に追加する文字列:
◆文字列リスト:
上記のサンプルでは、「上記の入力内容を、以下の各行の先頭・末尾に追加」ボタンを押すたびに、全行の先頭と末尾に指定の文字列(デフォルトでは二重カギ括弧記号)が挿入されます。
HTMLソースとJavaScriptソースは以下の通りです。
HTMLソース
1 2 3 4 5 6 7 | ◆行頭に追加する文字列:< 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」が実行されます。
JavaScriptソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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項目ずつ「行頭と行末に指定文字列を追加する」処理を施しています。
上記のソースでは、具体的には以下のような処理をしています。
以上です。
『最後の行が空行だった場合は、最後の行に対しては何も処理しない』という点に関しては、別途記事「すべての行頭に任意の文字列を追加する」や「すべての行末に任意の文字列を追加する」で説明しましたので、ここでは繰り返しません。
さて、textarea要素に入力された内容はプロパティ1つで一括取得が可能なので、replaceメソッドと正規表現を使うことでも同様の処理が実現できます。
1行の末尾には必ず「改行」があります。そして、「改行の直後」が「行の先頭」でもあります。
つまり、正規表現を使って、この「改行文字」を「末尾用の文字列+改行文字+先頭用の文字列」に置き換えることで、各行の先頭と末尾に任意の文字列を追加できます。
ただ、この方法だと最初と最後に1行だけ余計な文字列を追加してしまいますから、若干の工夫が必要です。
動作サンプルは以下の通りです。(動作は先ほどの配列版と同じです。)
◆行頭に追加する文字列:
◆行末に追加する文字列:
◆文字列リスト:
上記のサンプルでも、『上記の入力内容を、以下の各行の先頭・末尾に追加』ボタンを押すたびに、全行の先頭と末尾に指定の文字列(デフォルトでは全角の小なり記号「<」と大なり記号「>」)が挿入されます。
HTMLソースとJavaScriptソースは以下の通りです。
HTMLソース
1 2 3 4 5 6 7 8 | ◆行頭に追加する文字列:< 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」が実行されます。
JavaScriptソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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; } |
上記のソースはもっと短く書けますが、どこで何をしているのかを見やすくするため、若干冗長に記述しています。実際に使う際には、まとめられる行はすべてまとめる方が良いでしょう。(^_^;)
このソースでは、以下のような処理をしています。
書き換えています。
という処理をしています。
正規表現での「.*?」の「?」は『最短一致』の目的で記述していますが、なくても同様の意図通りに動くっぽいです。これはブラウザによるのかも知れないので、念のため付加しています。
というわけで、複数行の文字列を対象にして、すべての行頭に任意の文字列を加える方法でした。
()※初版は2014年6月23日に公開されました。
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)