罫線をテーブルに置換するにはreplaceメソッドを使います。
が基本の構文です。
置換後のオブジェクトを入れる変数名と置換前のオブジェクトの入った変数名は同じでも構いません。 というか、同じ方が簡単なのでお勧めです。 どっちみち置換後の結果を格納するだけですから、置換前のオブジェクトを再び使用する可能性がない限り、 変数の中身を上書きしても支障はないわけです。 問題は置換前の文字等または正規表現の書き方です。
という風に書きます。
/(スラッシュ)で挟むのはいいとして、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.innerHTMLをMySという変数名に格納。 置換前の罫線を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」を入れると左側縦一列に背景が表示されます。
SEO | [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送 | ||