文字１８ ■実用■　文字置換body記述部分

タグもスタイルシートもよくわからない。 htmlもcssもほとんど解説用のサイトのコピペですませている。! でも、ちょっとだけ画像を動かしてみたい。! ! マウスを動かすと{color:#ff0;font-weight:bold;background:#099;}キラキラ星が降ったり、春には桜、秋には枯葉、冬には雪%%なんか降らせてみたい。! 写真やイラストをスライドショーさせたり、ひらひら蝶々を飛ばしてみたり。! ! そんなふうに画像を動かすのは{color:#00f;}●%%だっていうのはわかった。! でも、{color:#f00;}jquery(ジェイ・クエリー)%%って……？! ダウンロードとかプラグインとか、わけわからんし。! ! コピペじゃだめかな……？　コピペだけで動く●はないのか？! あれ、コピペでも、けっこう動くぞ。わぁ、面白い♪♪! ! てなわけで、いままで集めたフリーの動く●のサンプルを公開します。! スライドショーやマウスストーカー、雪が降ったり泡が上ったり、画像がふわふわ浮いたりする●で、インパクトのある楽しいページが作れます。! {font-size:120%;}使用可能なら、どうぞお使い下さい。%%

ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字１８ ■実用■　文字置換body記述部分</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★置換文字領域の装飾。お好みで。#Tboxは必須*/
#Tbox{
margin:30px 15%;/*★中央位置指定*/
color:#000; /*★文字色 黒*/
font-size:90%; /*★文字サイズ*/
line-height:1.6;/*★文字の行間指定*/
padding:20px;/*★文字と領域の余白*/
background:#def;/*★背景色指定　水色*/
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。 id="Tbox"を必ず記述-->
<div id="Tbox">
タグもスタイルシートもよくわからない。
htmlもcssもほとんど解説用のサイトのコピペですませている。!
でも、ちょっとだけ画像を動かしてみたい。!
!
マウスを動かすと{color:#ff0;font-weight:bold;background:#099;}キラキラ星が降ったり、春には桜、秋には枯葉、冬には雪%%なんか降らせてみたい。!
写真やイラストをスライドショーさせたり、ひらひら蝶々を飛ばしてみたり。!
!
そんなふうに画像を動かすのは{color:#00f;}●%%だっていうのはわかった。!
でも、{color:#f00;}jquery(ジェイ・クエリー)%%って……？!
ダウンロードとかプラグインとか、わけわからんし。!
!
コピペじゃだめかな……？　コピペだけで動く●はないのか？!
あれ、コピペでも、けっこう動くぞ。わぁ、面白い♪♪!
!
てなわけで、いままで集めたフリーの動く●のサンプルを公開します。!
スライドショーやマウスストーカー、雪が降ったり泡が上ったり、画像がふわふわ浮いたりする●で、インパクトのある楽しいページが作れます。!
{font-size:120%;}使用可能なら、どうぞお使い下さい。%%
</div>

<script type="text/JavaScript">
<!--
/*==============================================================================
複数の置換方法：http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1396367778
body記述での置換方法：http://oshiete.goo.ne.jp/qa/2027625.html
=================================================================================*/
window.onload=function(){
var str=document.getElementById("Tbox");
str.innerHTML=str.innerHTML.replace(/{/g,"<span style=\"").replace(/}/g,"\">").replace(/%%/g,"</span>").replace(/!/g,"<br>").replace(/●/g,"javascript（ジャバスクリプト）");
}
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

何度も繰り返し出てくる長い言葉やタグを、簡単な文字に置き換えして、文章記述をラクにするJavaScriptです。
実際の文章では「●」と記述した文字が、画面では「javascript（ジャバスクリプト）」と表示されています。改行タグも置換しています。
今回の文章では、５種類の置換を行っています。具体的に説明します。

replace(/置換前の文字/g,"置換後の文字")が、基本の形です。
「A」を「a」に置換、「B」を「b」に置換、「C」を「c」に……というふうに、複数の置換をする場合は、JavaScriptのソースの中で、
××= ××.replace(/A/g,"a").replace(/B/g,"b"); と記述してある部分に、「.」を付けて継ぎ足していってください。
××= ××.replace(/A/g,"a").replace(/B/g,"b").replace(/C/g,"c").replace(/D/g,"d");
記述の最後は「;」で止めます。

それでは今回の５種類の置換について説明します。
まず、「●」は replace(/●/g,"javascript（ジャバスクリプト）")の記述で、「javascript（ジャバスクリプト）」と表示されます。全部で４ヶ所あります。
replace(/!/g,"<br>")で、「!」は「<br>」と表示されます。

そして、残りの３種類は、「<span style=""></span>」を３つに分解して指定しています。
１つ目は、「{」で「<span style="」へ、２つ目は「}」で「">」へ、３つ目は「%%」で「</span>」へと置換します。
「.replace(/{/g,"<span style=\"").replace(/}/g,"\">").replace(/%%/g,"</span>")」の部分が、その記述部分ですが、その中に「\」が記述してあります。
これはJavaScriptには、「"(ダブルクォート)」で２重に囲んではいけないというルールがあるためです。
それに関する詳しい説明は、とほほのWWW入門を読んで下さい。自分で置換文字を指定したい時の役に立ちます。

この３種類の置換によって、「{color:#ff0;font-weight:bold;background:#099;}キラキラ星が～～冬には雪%%」という文章の記述で、画面表示は、「キラキラ星が～～冬には雪」になります。
また置換文字同士を組み合わせて、「{color:#00f;}●%%」の記述で、「javascript（ジャバスクリプト）」の表示になります。

実は、「%」ではなく「%%」で「</span>」へと置換としているのは、最終行に「{font-size:120%;}」を使用しているからです。
「置換前の文字」に使用する文字は、置換文字領域である<div id="Tbox">～～</div>の中では、置換目的以外には使用できません。
置換目的以外にその文字を使用すると、表示がおかしくなるので、充分に気を付けて下さい。

見本の置換の指定は、自分の都合に合わせて自由に変更可能です。
削除してもいいし追加してもいいし、置換文字を変更しても大丈夫です。
複数の置換方法の参考サイトはYAHOO!知恵袋から。 bodyに直接記述する置換方法は教えて！gooから。

文字１８ ■実用■ 文字置換body記述部分 UP日時 : 2015/03/04

　文字１８ ■実用■　文字置換body記述部分　　　　UP日時 : 2015/03/04