2013年9月13日金曜日

特殊な条件でJavascriptのsplitを実行した場合の挙動

Javascriptのsplitで、分割対象の文字列と区切り文字に色んな値を入れて試した結果のメモ。
いや、ちょいと詰まったもんで。
1.分割対象の文字列、区切り文字の両方共に値を指定しない場合
要素数zeroの配列ができる。
2.文字列と区切り文字の値が等しい場合(何らかの値を必ず設定)
要素数が2、2個の要素共に値が空文字("")の配列が生成される。
3.分割対象の文字列のみ値を設定した場合
文字列は1文字ずつ分割される。
4.区切り文字のみ値を設定した場合
要素数が1、要素の値が空文字("")の配列が生成される。
5.文字列に区切り文字が無い場合
要素数が1、その要素の値が文字列の配列が生成される。
6.文字列の先頭が区切り文字の場合
要素数が2、始めの要素の値は空文字("")、最後の要素の値は文字列から区切り文字を除いた値の配列が生成される。
7.文字列の先頭が区切り文字の場合
要素数が2、始めの要素の値は文字列から区切り文字を除いた値、最後の要素の値は空文字("")の配列が生成される。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function  disp(str,sep){
        var ary = (str.value).split(sep.value);
        var test = document.getElementById("test");
        if(Array.isArray(ary)){
          var j = ary.length;
          test.innerHTML = "要素数:" + j + "<br />";
          var val = new String;
          for(i=0,j=ary.length;i<j;i++){
            switch(ary[i]){
              case null:
                val = "null";
                break;
              case " ":
                val = "space";
                break;
              case undefined:
                val = "undefined";
                break;
              case "":
                val = "空文字";
                break;
              default:
                val = ary[i];
                break;
            }
            test.innerHTML += i + "⇒" + val + "<br />";
          }
        }else{
          alert(typeof(ary));
        }
      }
    </script>
  </head>
  <body>
    <form>
      <p>String:<input type="text" id="str"></p>
      <p>Separator:<input type="text" id="sep"></p>
      <input type="button" id="btn" value="show" onclick="disp(str,sep);">
    </form>
    <div id="test"></div>
  </body>
</html>


検証ツール

文字列:
区切り文字:

0 件のコメント:

コメントを投稿