SQLの窓

2010年08月27日


JS : 正規表現置換基本テスト

HTML の記述そのものを、HTML 上で表現する為の文字列の置換のテストを
行う HTML( +JavaScript ) です。

※ /g で全て置換する事が解ると思います。
※ サンプルは、charset=euc-jp であることに注意してください





<html>
<head>
<META http-equiv="Content-type" content="text/html; charset=euc-jp" />
<title>JavaScript 正規表現置換基本テスト</title>
<script type="text/javascript">

function act_replace( ev ) {

	txt = document.getElementsByName("text")[0].value;

	txt = txt.replace( /&/g, "&amp;" );
	txt = txt.replace( /</g, "&lt;" );
	txt = txt.replace( />/g, "&gt;" );

	document.getElementById("area").innerHTML = txt;

}

function act_replace_no( ev ) {

	txt = document.getElementsByName("text")[0].value;

	document.getElementById("area").innerHTML = txt;

}

function act_replace_nog( ev ) {

	txt = document.getElementsByName("text")[0].value;

	txt = txt.replace( /&/, "&amp;" );
	txt = txt.replace( /</, "&lt;" );
	txt = txt.replace( />/, "&gt;" );

	document.getElementById("area").innerHTML = txt;

}

</script>

</head>
<body>

<textarea
	name="text"
	style='width:400px;height:100px;'
>&lt;input type="text"&gt;
&lt;input type="text"&gt;</textarea>
<br />
<input type="button" value="置換する" onclick="act_replace(event);">
<input type="button" value="そのまま" onclick="act_replace_no(event);">
<input type="button" value="g無し置換" onclick="act_replace_nog(event);">
<br />
<pre id="area"></pre>


</body>
</html>



posted by lightbox at 2010-08-27 15:44 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする

2009年12月27日


JavaScript : 正規表現の任意の文字列

解りやすい確実そうな方法が [\s\S]+ でした。
\s : スペース、タブ、フォームフィードなどの任意の空白文字
\S : 空白文字以外の任意の文字

[.\n]+ ができそうですが、JavaScript でエラーになります。
他の言語でおいおいチェックしますが、今回の結果です。

.+ はうまく動くのですが、当然ですが . に改行は含まれません
テキスト全体を /g で検索する場合は注意して下さい。

テキスト全体では、[\s\S]+? の後ろに終わって欲しい文字
または文字列を指定して下さい。これは重要です。








タグ:正規表現
posted by lightbox at 2009-12-27 20:44 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする

JavaScript : g の無い正規表現の結果

/g が無い場合は、配列に結果が入ります。
最初に全ての一致、それ以降はサプマッチです
しかし、ReqExp.$1 にもセットされるので、ループ処理で使う場合しか使いません。
var str = '<A href="URL" target="_blank">テキスト</A>';
var arr = str.match(/<a[\s\S]+?>(.+)<\/a>/i);
alert(arr[0]);
alert(arr[1]);
alert(RegExp.$1);




posted by lightbox at 2009-12-27 20:29 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする

JavaScriptの正規表現

このページのリンクらしき文字列を全て取得します。




function getLink1() {
	var str = document.getElementsByTagName("BODY")[0].innerHTML;
	var arr = str.match(/<a[^>]+>/ig);
	str = "";
	var len = arr.length;
	for( i = 0; i < len; i++ ) {
		str += arr[i] + "\n"
	}
	document.getElementById("resultLinkText").value = str;
}
function getLink2() {
	var str = document.getElementsByTagName("BODY")[0].innerHTML;
	var arr = str.match(/<a[\s\S]+?>/ig);
	str = "";
	var len = arr.length;
	for( i = 0; i < len; i++ ) {
		str += arr[i] + "\n"
	}
	document.getElementById("resultLinkText").value = str;
}

function getLink3() {
	var str = document.getElementsByTagName("BODY")[0].innerHTML;
	var arr = str.match(/<a[\s\S]+?a>/ig);
	var arr2;
	
	str = "";
	var len = arr.length;
	for( i = 0; i < len; i++ ) {
		var arr2 = arr[i].match(/>(.+)</i);
		try {		
			str+= arr2[1] + "\n";
		} catch(e){}
	}
	document.getElementById("resultLinkText").value = str;
}
※ BODY より取得するので、IFRAME 内は対象外です
※ <a[^>]+> は、<a で始まって、> 以外が1つ以上続いて > で終わると言う意味です。
※ <a[\s\S]+?> は、<a で始まって、
任意の文字が1つ以上続いて > で終わる最短の文字列と言う意味です。
※ <a>〜</a> の 〜は単純には取得できません 一旦取得したアンカーより内側の文字列を取得しています ※ /ig の i は、大文字小文字を区別しないという意味です。 ※ /ig の g は、全ての対象を最後まで探すという意味です。 ■ もう少し詳しく JavaScriptの正規表現


posted by lightbox at 2009-12-27 20:05 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする

2009年12月21日


JavaScript : 正規表現で、PE-100,120 の分解  

PE-100,120 は、座標データです。
Pは通過点で、Eは最終点である事を示します。
-100 と 120 が座標で、これを分解する為に以下のような正規表現を使います。

([^\d]+?)([\-]?\d+),([\-]?\d+)

1) [^\d]+?

1〜n個の数字以外の最短の文字列です。
次のパターンに - が来る場合があり、- も数字以外なので、? が無いと
- もこちら側に来てしまいます。この ? は、正規表現で最も重要な記号です。
\d は数字を表すのですが、JavaScript では d になってしまうので注意です。
JavaScript では、\d は \\d で表す必要があります。
[] は、文字集合を表しており、省略できる場面もありますが、
出来る限り指定したほうが良いでしょう。^ は否定なので文字集合
全てを否定できます。
+ は直前のパターンの文字が1文字以上連続する事を意味します。

() は、後で部分一致として文字列を取り出す為に用います。パターン
中で複数使って、JavaScript では、後で RegExp.$1、RegExp.$2、RegExp.$3、
というように取り出すのが最も直感的で簡単です


2) [\-]?\d+

[\-]は、-文字を示しますが、後の ? は、直前の文字が0文字か1文字で
一致します。良く使われるのが https? で、http でも https でも一致します。
[] の中での - は範囲指定なので、- を示す為に \- となります

3) ,

,( カンマ ) と一致します。


記号(メタキャラクタ)一覧







タグ:正規表現
posted by lightbox at 2009-12-21 03:28 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする

2009年12月17日


JavaScript : 一見バグのように見える正規表現オブジェクトの正しい動作

一つ目の正規表現が一致しません。
"\d" は、結局 "d" なので、正規表現のメタ文字にはなりません。
つまり、一つ目は以下のように指定する必要があります
pat = new RegExp("([^\\d]+?)([\-]?\\d+)\,([\-]?\\d+)");
( 外部から入力される時は \d でいい事になります )
str = "PE-100,120";

pat = new RegExp("([^\d]+?)([\-]?\d+)\,([\-]?\d+)");
alert(str.match( pat ));
alert( RegExp.$1 + "|" + RegExp.$2 + "|" + RegExp.$3 );

pat = new RegExp("([^0-9]+?)([\-]?[0-9]+)\,([\-]?[0-9]+)");
alert(str.match( pat ));
alert( RegExp.$1 + "|" + RegExp.$2 + "|" + RegExp.$3 );

alert(str.match( /([^\d]+?)([\-]?\d+)\,([\-]?\d+)/ ));
alert( RegExp.$1 + "|" + RegExp.$2 + "|" + RegExp.$3 );



タグ:javascript
posted by lightbox at 2009-12-17 01:22 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする

2009年10月11日


JS : 正規表現サブマッチテスター

関連するMicrosoftのドキュメント
正規表現の構文

NT (.*?);

は、NT で始まって、;で終わる最短の文字列です
. => 改行を除く任意の1文字
* => 直前の文字パターンと0回以上一致
? => 直前のパータンで、できるだけ少ない文字列と一致

▼ ? を取り除くと違いが良く解ります



RegExp.$1
RegExp.$2
RegExp.$3
<INPUT type=button value="実行" onClick='
try {
var re = new RegExp(document.getElementById("patString").value,"ig");
re.exec(document.getElementById("baseString").value);
document.getElementById("resultString").value=RegExp.$1;
document.getElementById("resultString2").value=RegExp.$2;
document.getElementById("resultString3").value=RegExp.$3;
}catch(e){alert(e.message)}
'>
<br>
RegExp.$1<INPUT type=text id="base" style="width:500px;">
<br>
RegExp.$2<INPUT type=text id="pat" style="width:500px;">
<br>
RegExp.$3<INPUT type=text id="result" style="width:500px;">





posted by lightbox at 2009-10-11 02:35 | JavaScript 正規表現 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり