TECHNICAL INFORMATION技術情報

第7回
  文字列

文字列

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

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

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

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

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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)で指定します。ここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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=色名または色指定値 背景色を設定/参照

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

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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>

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

● 文字列の装飾

.bold() 太字 <b>文字列</b>
.fixed() 固定ピッチフォント   <tt>文字列</tt>
.italics() 斜体 <i>文字列</i>
.strike() 打ち消し線  
.sub() 下付き文字 <sub>文字列</sub>
.sup() 上付き文字 <sup>文字列</sup>
.link(URL) リンクを設定 <a href="URL">文字列</a>
.anchor(アンカー名)   アンカーを設定 <a name="アンカー名">文字列</a>  

 左列の JavaScript の設定は、右列の HTML タグと同じ結果になります。これらの例はここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> var i; document.write("普通の文字<hr>"); 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("https://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>") というようにしても結果は同じですが、変数に代入された文字列を装飾するときなどは、このメソッドを使用する方が簡単です。

● 大文字/小文字にする

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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 では、[開始位置] と [終了位置] が入れ代わっても、同じ結果になります。例はここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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>

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

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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 の位置(先頭)から検索します。例はここをクリックしてください。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> 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 にして、一致した回数と共に、新しいウインドウを開いて書き出しています。