特定文字～特定文字の間の文字列を切り出す関数
を作ったのでメモ。
function strcut(str, start, end){ var sidx = 0; var eidx = str.length; if (start != ""){ sidx = str.indexOf(start) + start.length; } if (end != ""){ eidx = str.indexOf(end); } if (sidx > eidx){ return ""; } return str.substring(sidx, eidx); }
使い方と結果はこんな感じ。
var str = "/hoge.php?mainichi=everyday"; console.log( strcut(str, "/", ".php") ); // hoge console.log( strcut(str, "", "?") ); // /hoge.php console.log( strcut(str, "mainichi=", "") ); // everyday console.log( strcut(str, ".php", "/") ); // (空文字)
ただし、単純に
「最初に見つかった開始文字列より後」から
「最初に見つかった終了文字列より前」を切り出しているだけなので
データによっては意図した結果にならないことに注意。
// 本当はたぶん「a」を取り出したいやつ var str = "[[[a]]]"; console.log( strcut(str, "[", "]") ); // [[a
javascriptでゼロパディング
ググると
「ゼロパディングしたい文字列の左側にゼロくっつけておいて右側から切り出す」
って方法しか出てこないんだけどマジか…そういう標準関数とか存在しないのか…
しかもその方法そのまんまだと、もし桁が溢れる場合に切り捨てられてしまうので、
「規定の桁数以下なら左側をゼロで埋め、そうでなければそのまま返す」というのを関数化しました。
/* ゼロパディングするやつ：strは文字列、cntは桁数 */ function zeropadding(str, cnt){ // 強制的に文字列化 str = "" + str; // 文字列が規定桁数未満なら、足りない桁数分のゼロを左側に追加して返す if (str.length < cnt){ return "0".repeat(cnt - str.length) + str; } // 文字列が規定桁数以上なら、そのまま返す else{ return str; } }
意地でも1行で済ませたいマンはこちら。
参考演算子とか駆使してるだけでやってることは同じ。
function zeropadding(str, cnt){ return "0".repeat((("" + str).length < cnt) ? (cnt - ("" + str).length) : 0) + str; }
参考
JavaScriptでゼロ埋め処理
String.prototype.repeat() - JavaScript | MDN
SQX #7：原始ノ大密林/巨人の遺跡 その2
プレイ6～8日目。
気合入れて巨人の遺跡のマップは（ゴーレム部屋以外）埋めました。
全員Lv20になり、スキルもveteran枠が取れるようになりました。
そして宿代が最初の10倍。
巨人の遺跡はとりあえずここまでとして、探索司令部に行くとミッションが発令されました。
正規表現にマッチするかどうかを調べる
これも書き方を忘れるのでメモ。
基本的に
var pattern = new RegExp(正規表現); pattern.test(文字列); // ←ここの戻り値がtrue/false
という二段構えになるようです。
具体例はこんな感じ。
var str1 = "1234"; var str2 = "123a"; var pattern = new RegExp(/[0-9]+/g); // 「数字のみ1字以上」の正規表現 console.log( pattern.test(str1) ); // true（「1234」はマッチする） console.log( pattern.test(str2) ); // false（「123a」はマッチしない）
さらに、正規表現部分を変数に入れたい場合はこんな書き方。
var preg = "^[0-9]+$"; var str1 = "1234"; var str2 = "123a"; var pattern = new RegExp(preg); console.log( pattern.test(str1) ); // true console.log( pattern.test(str2) ); // false
配列のjQuery式foreach
覚えられないのでメモ
その他配列処理は以前に書いたやつ参照
jsで配列操作いろいろ - アナログCPU：5108843109
基本
var list = [ {"id" : 1, "value" : 100}, {"id" : 2, "value" : 200}, {"id" : 3, "value" : 300}, ]; $(list).each(function(index, element) { console.log(index, element.id, element.value); });
単純なループです。console.logの中身は
index：何番目の要素か。0始まり。
element.id：配列内の「id」の中身
element.value：配列内の「value」の中身
ということで結果はこんな感じ。
0 1 100 1 2 200 2 3 300
breakする
途中でループから抜けたい場合は「return false;」です。
なるほどね。
// （配列定義部分は省略：さっきと同じやつ） $(list).each(function(index, element) { if (element.id == 2){ return false; } console.log(index, element.id, element.value); });
id が2のときに抜けているので結果はこんな感じ。
0 1 100
continueする
ループの中身の処理を途中から無視して次の周に行きたい場合は「return true;」です。
なんでやねん。
// （配列定義部分は省略：さっきと同じやつ） $(list).each(function(index, element) { if (element.id == 2){ return true; } console.log(index, element.id, element.value); });
id が2のときに無視するので結果はこんな感じ。
0 1 100 2 3 300
CSSで画面の一部だけをスクロール可能にする
デザイン的には諸刃の剣な感じがしますが、
新着情報やちょっとした一覧など、特定部分のみをスクロールさせたいとき。
スタイルに「overflow: auto;」もしくは「overflow: scroll;」を入れればOKです。
ただし、heightを指定しておく必要あり。
（ここでheightにパーセンテージ指定を使用したい場合は、
上位要素のheightも指定する必要があることに注意）
尚、「auto」は必要なときだけスクロールバーが表示され、
「scroll」は強制的にスクロールバーが表示されます。
<div style="width: 200px; height: 50px; overflow: auto;"> 内容 </div>
サンプル
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
みかんおいしい
iframeの親子間・子同士の操作いろいろまとめ
苦戦した～～～。
以下、こんな感じの構造を想定していきます。
＜親 parent.html＞
<div id="header">ヘッダ</div> <iframe id="iframe_1" src="child_1.html"> <iframe id="iframe_2" src="child_2.html">
＜子 child_*.html＞
<div id="child_1_content">子1</div>
<div id="child_2_content">子2</div>
子から親を書き換える
＜JS（子）＞
$("#header", parent.document).text("ヘッダを更新");
親が、書き換えられたタイミングでアクションを起こす
＜JS（子）＞
parent.$("#header", parent.document).text("ヘッダを更新").change();
＜JS（親）＞
$("#header").change(function(){ alert($("#header").text()); });
これはちょっと悩んだ。
子側で、明示的にchangeイベントを送ることと、先頭の「parent.」がポイント。
親から子を書き換える
＜JS（親）＞
$("#iframe_1").contents().find("#child_1_content").text("子1を更新");
書き換えだけならこれでOK。
ついでに、書き換えられたときに子側でアクションを起こしてみたかったのだがうまくいかなかった。
iframeに「name="hoge"」を足して
「document.hoge.$(document.hoge.document).find("#child_1_content").text("子1を更新").change();」
みたいなのを試してみたのだが「document.hoge は未定義」みたいなエラーになる。
とりあえず今は困ってないので未解決だけど一旦放置。
参考：jQueryでiframeと親window同士でイベントをtriggerする
子1から子2を書き換える
＜JS（子1）＞
parent.$("#iframe_2").contents().find("#child_2_content").text("子1から子2を更新");
子から子を書き換えるのが必要になってる時点で設計がおかしい気がしなくもない
子だけリロード（親側で操作）
＜JS（親）＞
$("#iframe_1")[0].contentDocument.location.reload(true);
子だけリロード（子自身で操作）
＜JS（子）＞
location.reload();
まあこれはフレーム関係ないんですけどね。
特に気にせず、フレーム内でリロードしてくれますということで。
子だけリロード（子1が子2を操作）
＜JS（子）＞
parent.$("#iframe_2")[0].contentDocument.location.reload(true);
子から子を書き換えるのが必要になってる時点でｒｙ
子だけページ遷移（親から操作）
＜JS（親）＞
$("#iframe_1")[0].contentDocument.location.replace("child_2.html");
子だけページ遷移（子自身で操作）
＜JS（子）＞
location.href = "child_2.html";
これもフレームは関係ないんですが、フレーム内で遷移してくれます。
子だけページ遷移（子1から子2の遷移を操作）
＜JS（子1）＞
parent.$("#iframe_2")[0].contentDocument.location.replace("child_1.html");
子から子を書き換えるのがｒｙ
SQX #6：原始ノ大密林/巨人の遺跡 その1
プレイ4～5日目。
前回、碧照ノ樹海を無事踏破。
さて次の迷宮は…と外に出てみると、碧照ノ樹海のそばに採集ポイントができました。
効率はよろしくないようですが、安全に採集できるところ、という様子。
キャンプに寄ると、ウィラフさんが次の迷宮について教えてくれます。
テンション上がってきた。
CSSでheightにパーセンテージを使えなくて困った話
CSS初心者は毎日色々困っています。
諸々のサイズ指定をするのに、
とりあえずわかりやすくパーセンテージ指定をしたいことが結構あるのですが
効くときと効かないときがある。
どういうことかと思って調べてたらたぶんこれだ…。
CSSでheight:100%を使う方法について。 | Ginpen.com
html要素とbody要素にheight:100%を指定
html, body { height: 100%; }
親である要素のサイズが指定されていないとパーセンテージが使えないらしいので、
htmlやbodyを100%にしてしまえばOK、ということらしい。
長時間というか長期間？ハマってたのがやっと解決した…。
（めちゃくちゃ初歩的っぽい空気を感じる）
