2014年02月27日

split メソッド javascript

スポンサード リンク

 split メソッド 文字列を分割する
String.split(separator, limit);

文字列を区切り文字で分割し、新しい配列を生成します。

  分割対象文字列 ⇊   * 区切り文字は"、" と 改行 *

実行結果:

イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜
★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>split メソッド</title>
 <script>
  function splitStr() {
    var str = document.getElementById("str").value;//テキストエリアの文字列
    var outPut = document.getElementById("outPut");//表示領域
    var out="";  // 格納変数
    var rep=(/\r\n|\n/g); // 正規表現 テキストエリアの改行コード取得
    var line=str.split(rep); // 区切り文字行単位(改行)で文字列,分割

for (var i = 0; i < line.length; i++){ 
 out+=(i==0) ? "":"<br />";  // 条件演算子
  var lineStp = line[i].split("、"); // 区切り文字 "、" 行内の文字列,分割
   for (var j = 0; j <lineStp.length; j++) {
    out +="&nbsp;&nbsp;&nbsp;["+i+j+"] "+lineStp[j]; 
           }
             }
       outPut.innerHTML=out; // 分割文字列を書き出し
        }
 </script>
</head>
<body>
  <p>分割対象文字列:<br />
 <textarea id="str" rows="4" style="font-size :16px ;width : 530px;">
split メソッド、文字列を分割して、配列を返します。
このボックスの、文字列を、指定した区切り文字
この場合は"、 "で分割し、分割文字列を、配列として返し
且つ分割文字列を、行単位で、配列として格納しています。</textarea></p>
 <p><input type="button" value="文字列分割" onclick="splitStr()" /></p>
<p id="outPut" style="width : 530px;">実行結果:</p>
</body>
</html>
split メソッド お試しボックス
  分割対象文字列-String:
String.split(separator, limit);
第1引数-separator  第2引数-limit

実行結果:

split メソッド
指定した区切り文字を使って、対象文字列を複数の部分文字列に区切り、その配列を返す関数です。
構文
String.split(separator, limit);
引数
separator: 文字列を分割する区切り文字を設定します。区切りには正規表現も指定できます。
limit:    生成した部分文字列、配列の取り出し数を指定します。
詳細
separator(区切り文字)が文字列に含まれない場合は文字列全体が一つの配列で返ります。
空のときは、対象文字列が一文字ごとに分割されて配列に格納されます。
文字列先頭、文字列末尾に区切り文字がある場合は空の要素を含む配列が返ります。
区切り文字は新しい配列には含まれません。
正規表現
簡単な使用例
var moji ="あ1い2う3え4お5か6き7く8け9こ"
var dsp ="";
var spLit=moji.split(/[0-9]/); // 数字を区切りに
 for (var i = 0; i < spLit.length; i++){ 
  dsp +=spLit[i]; }
   alert(dsp);

タグ:Split
posted by javaScript at 23:52 | 大阪 ☔ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする

2014年01月09日

text-overflowプロパティ 省略記号に転換(…)

スポンサード リンク

 表示領域から、はみ出した文字列を省略記号に転換(…)
text-overflow:ellipsis;

ブロック要素に指定した幅を、超えたテキストを切り取り、代わりに
省略符号(…)を表示します。

@ text-overflow : ellipsis ;

サイトやブログをJavaScriptサンプル を使って動きのあるページに、スタイルシートで 見栄え良く装飾

A text-overflow : ellipsis ; "スタイルシート"の前で改行

サイトやブログをJavaScriptサンプル を使って動きのあるページに
スタイルシートで 見栄え良く装飾

B text-overflow : clip ;

サイトやブログをJavaScriptサンプル を使って動きのあるページに、スタイルシートで 見栄え良く装飾

C text-overflow : ellipsis ;  SPAN要素に適用

サイトやブログをJavaScriptサンプルを使って動きのあるページに、スタイルシートで 見栄え良く装飾

イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜
★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>text-overflowプロパティ</title>
 <style type="text/css">
.pClip, .pEllipsis, .wSpace{
    width: 325px; /* ボックス 横幅 */
    border: 1px solid skyblue; /* ボーダー : 幅,線種,色 */
    overflow: hidden; /* はみ出た部分を表示しない */
    white-space: nowrap; /* テキストの自動改行を禁止 */
       }
.pEllipsis{
    text-overflow: ellipsis; /* 省略符号を表示する */
     }
.pClip{
    text-overflow: clip; /* 省略符号を表示しない */
     }
.wSpace{
    white-space: normal; /* 規定値に戻し 自動改行を行う */
    text-overflow: clip; /* 省略符号なし*/
     }
.sPan{ color:red;     /* SPAN要素 */
   text-overflow: ellipsis;white-space: nowrap;
   display: block; overflow: hidden;
      }
</style>
</head>
<body>
  <p class="pEllipsis"><!--@-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、スタイルシートで 見栄え良く装飾</p>
  <p class="pEllipsis"><!--A-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、<br />スタイルシートで 見栄え良く装飾</p>
  <p class="pClip">    <!--B-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、スタイルシートで 見栄え良く装飾</p>
  <p class="wSpace">   <!--C-->
サイトやブログをJavaScript<span class="sPan">サンプル
を使って動きのあるページに、スタイルシートで</span> 見栄え良く装飾</p>
</body>
</html>
text-overflowプロパティ
指定した表示領域から溢れた(overflow)テキストを切り取り
残るテキストの文末に省略記号(…)「三点リーダ」を付け加えます。
 値の指定
text-overflow: ellipsis; /* 省略符号を表示する */
text-overflow: clip;     /* 省略符号を表示しない */
付帯する CSSの指定
white-space: nowrap; で、要素内のテキストの自動折り返しを禁止して
overflow: hidden;により、表示領域からはみ出したテキストを隠し、そして
text-overflow: ellipsis; で、はみ出した部分を省略記号で代替表示します。
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
SPAN要素などのインラインレベル要素には、display: block;を付け加えます。
white-space プロパティ
 連続する複数のスペース、タブを1つの半角スペース(空白)にまとめるか、改行を空白に変換するか
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、 指定する際に使用します。
white-space
overflow プロパティ
  ブロック要素に指定した横幅・高さの 範囲から内容がはみ出した場合の
内容の表示方法を指定します
初期値は「visible」で、はみ出した内容も表示します。
overflow
posted by javaScript at 23:19 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。