X
pm studio world wide news pj club
pm studio world wide news pj club
news, tech, music, film, sports, cg, translation, photo uploader
  • 2016-01-05
  • PJ Club
  • How getting every line value in textarea with JavaScript or PHP / JavaScript、またはPHPでテキストエリアの内容を1行毎に取得する方法
  • Happy New Year!! 2016年初めのPJ Clubは、テキストエリアの内容をJavaScript、またはPHPで1行毎に取得する方法です。
    何に使うのか?pm studio world wide newsでは、複数の動画や静止画を表示する際に、リストとして利用しています。
    例えば、複数のYouTube動画があった場合、それぞれの動画ごとに表示させるEmbed tagを記述するのではなく、テキストエリアの1行毎に書かれたURLを切り替えて表示させています。
    YouTubeの場合、YouTube API経由で動画IDの記述だけで動画を表示出来るため、テキストエリアにIDを1行づつ記述し、送信しています。

    サンプル

    • QYGdLMf9hzM
    • QYGdLMf9hzM
    • QYGdLMf9hzM
  • では、テキストエリアの内容を1行づつ取得してみましょう。まずは、JavaScriptからです。
    JavaScriptの場合、jQueryを利用します。
    テキストエリアに記述された内容は下記のようすれば取得出来ます。

    $("#テキストエリアのID").val( );

    これで、全部の記述内容が取得できます。続いて1行づつ取得します。1行は改行コードで判断します。
    テキストエリアの改行コードはMac OSX、UNIXは「\n」、Mac OS9は「\r」、Windowsでは「\r\n」です。
    文章内の改行コードはどれかを判断するため、正規表現を使用します。記述は下記のようにします。

    /[\r\n]+/

    改行コードで文書を1行づつ分割していきます。分割するにはsplit( )関数を使います。

    var value=$("#テキストエリアのID").val( );
    var lineValue=value.split(/[\r\n]+/);

    lineValueには、分割された内容が配列で保存されています。配列は○○, ○○, ○○のように内容がカンマ形式で要素に格納されています。
    この配列からデータを抽出します。jQueryには配列の要素数だけ繰り返しを処理する便利な$.each( )関数がありますので、それを使用します。

    var value=$("#article1").val( );
    var lineValue=value.split(/[\r\n]+/);
    //1行づつの文章を保存する変数を初期化
    var lineVal="";
    //行数を数える変数
    var i=0;
    $.each(lineValue,function( ){
         if(lineValue[i]){
              lineVal +=(i+1)+"行目のデータ:"+lineValue[i]+"<br>";
         }
         i++;
    });
    $("#データ表示用HTMLのID").html(lineVal);

    となります。まとめると、

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"><?/script>
    <script type="text/JavaScript">
    <!--
    $(document).ready(function( ) {
         $("#submit").click(function(){
              var value=$("#text1").val();
              var lineValue=value.split(/[\r\n]+/);
              var lineVal="";
              var i=0;
              $.each(lineValue,function(){
                  if(lineValue[i]){
                      lineVal +=(i+1)+"行目のデータ:"+lineValue[i]+"<br>";
                  }
                  i++;
              });
              $("#lineVal").html(lineVal);
         });
    });
    //-->
    </script>
    </head>
    <body>
         <textarea cols="72" rows="10" id="text1" name=text1"></textarea>
         <input id="submit" type="button" name="send" value="send">
         <div id="lineVal"></div>
    </body>
    </html>

    サンプル:下記のテキストエリアに文字をいれて「send」をクリックしてみてください。


     

  • 次にPHPの場合です。PHPは、HTMLのフォームからデータをPHPファイルへ送信し、PHPのスクリプトがデータを受け取って処理します。
    HTMLでフォームを記述します。送信先はテキストエリアのデータを取得するPHPのファイル名です。

    <form method="post" action="PHPのファイル名">
         <textarea cols="72" rows="10" id="text1" name=text1"></textarea>
         <input id="submit" type="submit" name="send" value="send">
    </form>
    <div id="lineVal"></div>

    送信データを受け取る側のスクリプトです。まず、送信されたか、されていないかを判断します。

    if($_SERVER["REQUEST_METHOD"] != "POST"){
         送信されなかった場合のスクリプト
    } else {
         送信された場合のスクリプト
    }

    次に受け取るスクリプトです。PHPでフォームデータを取得する場合、テキストエリアのnameが受け取る対象要素です。idではありません。

    if($_SERVER["REQUEST_METHOD"] != "POST"){
         送信されなかった場合のスクリプト
    } else {
         $value =htmlspecialchars($_POST["テキストエリア名"],ENT_QUOTES);
    }

    これで、テキストエリアのデータが取得できました。さて、取得したデータが空かそうでないかを判断します。

    if(!isset($value) || $value===""){
         空の場合のスクリプト
    } else {
         空でなかった場合のスクリプト
    }

    つづいて、JavaScriptと同様に改行コードを判断します。送られてきたデータの改行コードが「\r」か「\r\n」であった場合、「\n」に置き換えます。置き換えには、str_replace("置き換える前の文字", "置き換え後の文字", "置き換えたい文章")関数を使用します。

    $cr = array("\r\n", "\r");
    $value= str_replace($cr, "\n", $value);

    次に、改行コード「\n」で文章を1行づつ分割します。分割にexplode("分割させる文字", "分割対象文章")関数を使います。

    $lineValue = explode("\n", $value);

    $lineValueに、分割されたデータが配列で保存されます。この配列から1行づつのデータを抽出します。配列の要素数だけ繰り返すforeach() 関数を使用します。

    $i=0;
    foreach ($lineValue as $val) {
         if ($val{
              $lineVal .=$i+1."行目のデータ:".$val."<br>";
         }
         $i ++;
    }

    結果をHTMLに表示させるために<?php echo $lineVal; ?>としてHTMLに追加します。

    <div id="lineVal"><?php echo $lineVal; ?></div>

    まとめると、

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <?php
         if($_SERVER["REQUEST_METHOD"] != "POST"){
         } else {
              $value =htmlspecialchars($_POST["text1"],ENT_QUOTES);
              if(!isset($value) || $value===""){
              } else {
                  $cr = array("\r\n", "\r");
                  $value= str_replace($cr, "\n", $value);
                  $lineValue = explode("\n", $value);
                  $i=0;
                  foreach ($lineValue as $val) {
                      if ($val){
                                $lineVal .=($i+1)."行目のデータ:".$val."<br>";
                      }
                      $i ++;
                  }
              }
         }
    ?>
    </head>
    <body>
         <form method="post" action="textarea.php">
         <textarea cols="72" rows="10" id="text1" name="text1"></textarea>
         <input id="submit" type="submit" name="send" value="send">
         </form>
         <div id="lineVal"><?php echo $lineVal; ?></div>
    </body>
    </html>

    となります。このファイルをtextarea.phpとして保存し、サーバーにアップするとテキストエリアの内容を1行づつ取得表示します。
  • source : pm studio world wide news
Recent Post
Latest News
Billboard Hot 100
Top 10
  • No.1
    In My Feelings
    Drake
  • No.2
    I Like It
    Cardi B, Bad Bunny & J Balvin
  • No.3
    Girls Like You
    Maroon 5 & Cardi B
  • No.4
    Nice For What
    Drake
  • No.5
    Boo'd Up
    Ella Mai
  • No.6
    God's Plan
    Drake
  • No.7
    Lucid Dreams
    Juice WRLD
  • No.8
    Don't Matter To Me
    Drake & Michael Jackson
  • No.9
    Psycho
    Post Malone & Ty Dolla $ign
  • No.10
    The Middle
    Zedd, Maren Morris & Grey
BBC Radio 1 Singles 40
Top 10
  • Don't Matter To Me (feat. Michael Jackson)
  • No.5
    "Don't Matter To Me (feat. Michael Jackson)"
    Drake
  • Editor: Toshio Maeoka / pm studio
    pm studio world wide news © 2014-2018 . All Rights Reserved
^
to TOP