まほ〜のあいらんどけんきゅ〜

JavaScriptによる掲示板改造(その2)

4.罫線をテーブルに置換

罫線をテーブルに置換するにはreplaceメソッドを使います。

置換後のオブジェクトを入れる変数名=置換前のオブジェクトの入った変数名.replace(置換前の文字等または正規表現,置換後の文字等);

が基本の構文です。

置換後のオブジェクトを入れる変数名と置換前のオブジェクトの入った変数名は同じでも構いません。 というか、同じ方が簡単なのでお勧めです。 どっちみち置換後の結果を格納するだけですから、置換前のオブジェクトを再び使用する可能性がない限り、 変数の中身を上書きしても支障はないわけです。 問題は置換前の文字等または正規表現の書き方です。

/置換前の文字等/gi

という風に書きます。

/(スラッシュ)で挟むのはいいとして、giの意味ですが、

ここでは大文字小文字に関係なくすべてを置換するのでgiとしているわけです。 どちらかでいい場合はどちらかだけ書きます。 置換後の文字等は必ず"(ダブルクォーティション)か'(シングルクォーティション)で挟んでください。

そして置換前のオブジェクトです。 こいつを変数に格納しなくては、何も始まりません。 そこでdocument.body.innerHTMLを使います。 id付きのdivタグをdocument.writeで書き出す方法では、 明らかにタグの入れ子関係がおかしくなるので、NetscapeではinnerHTMLを取得できません。 IEでは奇跡的?に取得できるようですが、かなり機種依存な方法なのでお勧めできません。 document.body.innerHTMLだとbody要素の中のinnerHTMLを取得することができます。

これをまとめると、


repW="</td></tr></table><br><table><tr><td>";
myS=document.body.innerHTML; 
repT=/<hr size=.?1.?.?>/gi;
myS=myS.replace(repT,repW);
document.body.innerHTML=myS+'</td></tr></table>';

という風になります。

置換後のテーブル要素をrepWという変数に格納して、 document.body.innerHTMLMySという変数名に格納。 置換前の罫線をrepTという変数名に入れています。

ここで注意ですが、罫線のタグはIEでソースを見ると<HR SIZE=1>になっていますが、 Netscapeでは<hr size="1">という風にダブルクォーティションが補われています。 しかも、Opera7.23では<hr size='1'>という風にシングルクォーティションが補われ、 Opera7.53では<HR SIZE="1"/>というふうにXHTML対応になっています。 これではバラバラなので、ブラウザ判別が必要だと思われるところですが、正規表現というとても便利なものがあるので、 これを使います。

正規表現の細かい説明は省略しますが、文字列などの一定のパターンを記号化したものと考えてください。 .は任意の1文字を表し、?は直前のパターンが0回か1回であることを示します。 これを2回続けることでちょうど、この場合の条件を満たすわけですね。 (ちなみに直前のパターンを0回以上繰り返す記号*を使うと最長の長さにmatchしてしまうので、この場合はうまくいきません。) そして置換後の結果を再びmySという変数に格納します。 そして、その変数と最後のテーブル要素の閉じタグをdocument.body.innerHTMLに返してやります。

この処理をwindow.onloadで実行する関数の中に入れることによって、 body要素のhr要素をtable要素に書き換えることができます。 最初に置換されるテーブルの閉じタグを活かすのであれば、最初にtable要素をdocument.writeで書き出して、 さらにBBSのタイトルなどを書き出しておくといいでしょう。

もう一つ重要なことはdocument.body.innerHTMLを取得すると、Operaではstyle要素が空になってしまいます。 replaceメソッドを使うときはCSSを外部化してlink要素をdocument.writeで書き出すようにしましょう。

ここまでをまとめたソースを次に示します。



var pb='';	//document.writeするタグなどを格納する変数

pb+='<link rel="stylesheet" href="CSSのURL" type="text/css">';	//Operaに対応するために外部化してlink要素で呼び出す

pb+='<table align="center"><tr><td>';	//最初のテーブルはdocument.writeする

pb+='<center><font size=7 face="Times New Roman">BBSのタイトル</font></center>';

document.write(pb);	//格納した変数をdocument.write

window.onload=function(){	//windowが読み込まれたら以下の関数を実行
	myl=document.links.length;
	if(document.all){	//IE&Opera
		for(i=0;i<myl+1;i++){
			with(document.links[i]){
				if(innerText=="[ケータイMode表示]"){	innerText="";}
				else if(innerText=="My HomePage"){	innerText="My HP";}
				else if(innerText=="Delete"){ 		innerText="Del";}
				else if(innerText=="[1]書く"){		innerText="write";}
				else if(innerText=="[4]私書箱IDで書く"){innerText="ID write";}
				else if(innerText=="[0]ホームページ"){ 	innerHTML="<font size=+1>HOME</font>";}
	}}}
	else if(document.getElementsByTagName){	//NN6以上
		for(i=0;i<myl+1;i++){
			with(document.getElementsByTagName('a')[i].firstChild){
				if(nodeValue=="[ケータイMode表示]"){	nodeValue="";}
				else if(nodeValue=="My HomePage"){	nodeValue="My HP";}
				else if(nodeValue=="Delete"){		nodeValue="Del";}
				else if(nodeValue=="[1]書く"){		nodeValue="write";}
				else if(nodeValue=="[4]私書箱IDで書く"){nodeValue="ID write";}
				else if(nodeValue=="[0]ホームページ"){	nodeValue="HOME";document.links[i].style.fontSize="large";}
	}}}
	
	repW="</td></tr></table><br><table align='center' cellpadding='10'><tr><td>";
	myS=document.body.innerHTML;	
 	repT=/<hr size=.?1.?.?>/gi;
 	myS=myS.replace(repT,repW);
 	document.body.innerHTML=myS+'</td></tr></table>';
}

サンプルです。やはり背景は抜いてありますが、CSSに「背景画像URL」を入れると左側縦一列に背景が表示されます。

JSのソースCSSのソースサンプル
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送