第7回

文字列


文字列

 ● 文字列のサイズと色を設定する

 文字列を表示するとき、サイズと色を設定したり、装飾することができます。

文字列.fontsize(文字のサイズ) 文字サイズを設定(文字サイズは 1~7)  
文字列.fontcolor(色名または色指定値)   文字の色を設定する
文字列.big() 文字を大きくする
文字列.small() 文字を小さくする

 ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    var i,datA;
    datB=new Array("black","gray","silver","white","blue","navy","teal","green","aqua"  
        ,"lime","yellow","magenta","olive","purple","maroon","red");
    for(i=1;i<=7;i++)
    {
        datA="文字サイズ"+i+"<BR>";
        document.write(datA.fontsize(i));
    }
    document.write("文字サイズbig<BR>".big());
    document.write("文字サイズsmall<BR>".small());
    document.write("文字サイズ標準<BR>");
    document.write("<HR>");
    for(i=0;i<=15;i++)
    {
        datA="★★★★★文字色"+datB[i]+"<BR>";
        document.write(datA.fontcolor(datB[i]));
    }
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

 この例では .fontsize() で文字サイズを1~7まで設定、.big().small() での文字の大きさ設定、.fontcolor() で標準16色名に文字の色を設定しています。

 文字の色は、色名以外に #rrggbb という色指定値でも設定できます。赤(Red)、緑(Green)、青(Blue)をそれぞれ、2桁の16進数(00~ff)で指定します。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    var i,j,k,datA,datB,datC;
    for(i=255;i>15;i-=32)
    {
        datA="#"+i.toString(16);
        for(j=255;j>15;j-=16)
        {
            datB=datA+j.toString(16);
            for(k=255;k>15;k-=8)
            {
                datC=datB+k.toString(16);
                document.write("■".fontcolor(datC));  
            }
            document.write("<BR>");
        }
    }
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

 .toString() というのは、( )内の進数に変換するもので、ここでは、255(16進数でff)までの10進数を16進数に変換しています。なお、.toString() は古いブラウザでは動作しません。

 ● 全体の文字色、リンクの文字色、背景色を設定する

 ページ全体の色を設定または参照することもできます。

document.fgColor=色名または色指定値 文字色を設定/参照
document.linkColor=色名または色指定値 リンクの文字色を設定/参照
document.alinkColor=色名または色指定値   リンク中の文字色を設定/参照
document.vlinkColor=色名または色指定値 訪問済リンクの文字色を設定/参照  
document.bgColor=色名または色指定値 背景色を設定/参照

 ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function disp()
    {
        var datA,datB,datC;
        datA=Math.floor(Math.random()*100)+150;
        datB=Math.floor(Math.random()*100)+150;
        datC="#cc"+datA.toString(16)+datB.toString(16);
        document.fgColor="purple";
        document.linkColor="red";
        document.alinkColor="blue";
        document.vlinkColor="green";
        document.bgColor=datC;
    }
</SCRIPT>
</HEAD>
<BODY onLoad="disp()">
普通の文字<P>
<A HREF="_kantan.html">未訪問のリンク(存在しないページへのリンク)</A><P>  
<A HREF="kantan0701.htm">訪れたことがあるリンク</A><P>
</BODY>
</HTML>

 文字の色は、色名により設定していますが、背景色は、色指定値の設定に乱数を使用して、ページを開くたびに、ランダムな色になるようにしています。

 ● 文字列の装飾
.blink() 点滅 <BLINK>文字列</BLINK>
.bold() 太字 <B>文字列</B>
.fixed() 固定ピッチフォント   <TT>文字列</TT>
.italics() 斜体 <I>文字列</I>
.strike() 打ち消し線  
.sub() 下付き文字 <SUB>文字列</SUB>
.sup() 上付き文字 <SUP>文字列</SUP>
.link(URL) リンクを設定 <A HRFE="URL">文字列</A>
.anchor(アンカー名)   アンカーを設定 <A NAME="アンカー名">文字列</A>  

 左列の JavaScript の設定は、右列の HTML タグと同じ結果になります。なお、Internet Explorer は.blink() が動作しません(HTML タグも)。これらの例はここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    var i;
    document.write("普通の文字<HR>");
    document.write("点滅(Internet Explorer は点滅しません)<HR>".blink());
    document.write("太字<HR>".bold());
    document.write("固定ピッチフォント<HR>".fixed());
    document.write("斜体<HR>".italics());
    document.write("打ち消し線<HR>".strike());
    document.write("普通の文字"+"上付き文字<HR>".sup());
    document.write("普通の文字"+"下付き文字<HR>".sub());
    document.write("八光ホームページへのリンク<HR>".link("http://www.hakko.co.jp/"));  
    document.write("ここはアンカー01<HR>".anchor("anchor01"));
    document.write("アンカー02に移動<HR>".link("#anchor02"));
    for(i=1;i<=200;i++)
        document.write(i+"*<P>");
    document.write("<HR>ここはアンカー02<HR>".anchor("anchor02"));
    document.write("アンカー01に移動<HR>".link("#anchor01"));
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

 単純に文字列を表示するときは、document.write("<I>斜体</I><HR>") というようにしても結果は同じですが、変数に代入された文字列を装飾するときなどは、このメソッドを使用する方が簡単です。

 ● 大文字/小文字にする
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function tCase()
    {
        with(document.form01)
        {
            txt02.value = txt01.value.toUpperCase();
            txt03.value = txt01.value.toLowerCase();
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
文字列を入力してください:<INPUT TYPE="TEXT" NAME="txt01" VALUE="AbCdEfG" SIZE="30">  
<INPUT TYPE="button" VALUE="変換" onClick="tCase()"><P>
大文字:<INPUT TYPE="TEXT" NAME="txt02" SIZE="30"><BR>
小文字:<INPUT TYPE="TEXT" NAME="txt03" SIZE="30"><BR>
</FORM>
</BODY>
</HTML>

 ここをクリックしてください。toUpperCase() は大文字に、toLowerCase() は小文字に文字列を変換します。

 ● 文字列の抜き出し
文字列.charAt(文字の位置) 位置の1文字を抜き出す  
文字列.slice(開始位置,終了位置)   一部分を抜き出す(終了位置は省略可)  
文字列.substring(開始位置,終了位置) 一部分を抜き出す
文字列.substr(開始位置,文字数) 一部分を文字数で抜き出す

 先頭の文字位置は 0 です。sliceで終了位置を省略した場合は、文字列の最後まで抜き出します。
 slicesubstring は、[開始位置] < [終了位置] で共に正なら、結果は同じです。slice に負の数を入れると、文字列の後ろから数えた位置になります。substring では、[開始位置] と [終了位置] が入れ代わっても、同じ結果になります。例はここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function tCase()
    {
        var str,start,end;
        with(document.form01)
        {
            str = txt01.value;
            start = txt02.value;
            end = txt03.value;
            txt04.value = str.charAt(start);
            txt05.value = str.slice(start,end);
            txt06.value = str.slice(start);
            txt07.value = str.substring(start,end);
            txt08.value = str.substr(start,end);
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
文字列:<INPUT TYPE="TEXT" NAME="txt01" VALUE="ABCDEFGHIJ" SIZE="20"><BR>
A:<INPUT TYPE="TEXT" NAME="txt02" SIZE="2">
 B:<INPUT TYPE="TEXT" NAME="txt03" SIZE="2">
 <INPUT TYPE="button" VALUE="表示" onClick="tCase()"><HR>
文字列.charAt(A):<INPUT TYPE="TEXT" NAME="txt04" SIZE="20"><BR>
文字列.slice(A,B):<INPUT TYPE="TEXT" NAME="txt05" SIZE="20"><BR>
文字列.slice(A):<INPUT TYPE="TEXT" NAME="txt06" SIZE="20"><BR>
文字列.substring(A,B):<INPUT TYPE="TEXT" NAME="txt07" SIZE="20"><BR>
文字列.substr(A,B):<INPUT TYPE="TEXT" NAME="txt08" SIZE="20"><BR>
</FORM>
</BODY>
</HTML>

 次の例は、タイマーを使用して、メッセージをテキストボックスとステータスバーに表示します。ここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    var tm,i=0,j=0;
    function msg()
    {
        var k,mes;
        mes=document.form01.txt01.value;
        for(k=0;k<50;k++)
            mes+=" ";
        mes=mes.slice(i)+mes.slice(0,i);
        document.form01.txt02.value=document.form01.txt01.value.slice(0,j);
        window.status=mes;
        i++;
        if(i>mes.length)
            i=0;
        j++;
        if(j>document.form01.txt01.value.length)
            j=0;
        clearTimeout(tm)
        tm=setTimeout("msg()",200);
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
<INPUT TYPE="text" NAME="txt01" VALUE="メッセージを入力してください" SIZE="50">
<INPUT TYPE="button" VALUE="スタート" onClick="msg()">
 <INPUT TYPE="button" VALUE="ストップ" onClick="clearTimeout(tm)"><BR>
<HR><INPUT TYPE="text" NAME="txt02" SIZE="50">
</FORM>
</BODY>
</HTML>

 テキストボックスには、メッセージの先頭から1文字ずつ、ステータスバーには、文字が流れて見えるように、メッセージにスペースを加えた文字列を、途中から抜いたものと、残りの部分をつなげて表示しています。

 ● 文字列を検索する

文字列.indexOf(検索文字列,検索開始位置)

 indexOf は、[文字列] から [検索文字列] を [検索開始位置] から検索し、最初に一致した文字列の先頭位置を返します。一致する文字列がない場合は -1 を返します。検索開始位置を省略すると、0 の位置(先頭)から検索します。例はここをクリックしてください。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
    function disp()
    {
        var i,datA="";
        for(i=1;i<=1200;i++)
        {
            datA+=Math.floor(Math.random()*10);
            if(i%50==0)
                datA+="\n";
        }
        document.form01.txt02.value=datA;
    }
    function idx()
    {
        var i=0,n=0,datA,datB,datC;
        datA=document.form01.txt01.value;
        datB=datA.fontcolor("magenta");
        datC=document.form01.txt02.value;
        while((n=datC.indexOf(datA,n))!=-1)
        {
            datC=datC.slice(0,n)+datB+datC.slice(n+datA.length);
            n+=(datB.length-1);
            i++;
        }
        win01=window.open("","","width=500,height=400,scrollbars=yes");
        win01.document.write(datA+" が、"+i+"箇所ありました。<HR>");
        win01.document.write(datC+"<HR>");
    }
</SCRIPT>
</HEAD>
<BODY onLoad="disp()">
<FORM NAME="form01">
<INPUT TYPE="text" NAME="txt01" VALUE="22" SIZE="10">
<INPUT TYPE="button" VALUE="検索開始" onClick="idx()">
<HR><TEXTAREA NAME="txt02" ROWS=25 COLS=60></TEXTAREA>
</FORM>
</BODY>
</HTML>

 ページを読み込むと、disp() が実行され、ランダムな数字を1行に50ずつ、1200字テキストエリアに書きます。
 [検索] をクリックすると、この数字から、上のテキストボックスの数字列を検索し、一致した部分を magenta にして、一致した回数と共に、新しいウインドウを開いて書き出しています。