HTMLそのまま出力君

この前の記事で、HTMLのタグをそのまま表示するためのプログラム(Javascript) をのせましたが、使う人は完成品が欲しいと思うので、このリンクからアプリとして使って下さい。

< や、> を、そのまま出力するプログラムです。< や、 > をHTMLソースコード内にそのまま書いても表示されなくて困りますよね。

やっていることは、< を、< に、> を > に、あとは、& を、 & に変換しているだけです。

あと、オンラインでコード変換するのはどうもなぁ、という人のために、HTML コードも載せておきます。

テキストファイルを開いて、下のコードをそのまままるごとコピペして保存して、拡張子を .html にすればＯＫです。ファイル名は（もち、拡張子を除いた部分の！）お好みで。

あと、実行時、この Web ページはスクリプトや Active X を実行しないように制限されています。みたいなのがでても、許可してＯＫです。僕が自分で使っているときも出るし、なんら悪さのないプログラムなので…。信用って大事！（涙）

tagShow_sjis.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<style type="text/css">
body { font-size : 16px ;font-family:ＭＳ Ｐゴシック,Times New Roman;}
.txtarea {
  margin-top:15px;
  }
.s_1a { margin-top:15px; clear: both ;}
.s_1b { margin-top:15px; }
</style>

<title>HTMLそのまま出力アプリ</title>

<script type="text/javascript">


function tagShow( plain )
{  //escape encode という言葉は違うみたいだよ？

  var s = "" ;
  if( document.getElementById("id_pre").checked ) s += "<pre>\r\n" ;
  if( document.getElementById("id_code").checked ) s += "<code>\r\n" ;
 
  var c ;
  
  for( var i = 0; i < plain.length ; i ++ )
  {  c = plain.charAt(i) ;

     switch( c) {
        case "<"  : s += "&lt;"  ; break ;
        case ">"  : s += "&gt;"  ; break ;
        case "&"  : s += "&amp;" ; break ;
        //case "\"" : s += c ; break ;
        //case "'"  : s += c ; break ;
        //case "\\" : s += c ; break ;
        default  :  s += c ; break ;
    }
  }

  if( document.getElementById("id_code").checked )
       s += (( s.slice(-2) != "\r\n") ? "\r\n" : "" ) + "</code>" ;
  if( document.getElementById("id_pre").checked ) 
       s += (( s.slice(-2) != "\r\n") ? "\r\n" : "" ) + "</pre>" ;

return s ;
}

</script>

</head>
<body>

<div style="margin-top:100px;"><div><!--<a href="./generate_resource.html" style="float:right;">resourceGen</a>--></div>
  <div id= "firstParent" align="center" style="margin:0 auto;width:875px;text-align:center;">
    <!--<h3>括弧コード生成</h3>-->
    <h3>HTMLそのまま出力</h3>
    <div style="margin:0 auto;width:650px;">
    <div id="container_1" style="margin-top:10px;text-align:left;">
    出力したいコードを入力<br>
    <textarea id="t_input" cols="60" rows="10" style="margin-top:3px;"></textarea><br>
    <input type= "button" id="do_conv" value="GO !" onClick="document.getElementById('t_output').value = tagShow(document.getElementById('t_input').value)" style="margin-top:5px;">

    <input type= "button" value="クリア" onClick="document.getElementById('t_input').value ='';">
     <input type= "checkbox" id="id_pre" onClick="document.getElementById('t_output').value = tagShow(document.getElementById('t_input').value)"> &lt;pre&gt;
    <input type= "checkbox" id="id_code" onClick="document.getElementById('t_output').value = tagShow(document.getElementById('t_input').value)"> &lt;code&gt;

    <div style="margin-top:30px;">↓↓↓<br>
    <textarea id="t_output" style="" cols="60" rows="10" onFocus="this.select();"></textarea>

    </div>
    
    </div>
    </div>
  </div>
</div>
<br>
<p align="right">This application was created by Yutaka Kawasaki.</p>
</body>
</html>

Cofee Break ♪ (拙作：A song leading me to realization )　：聴いてかネ？(ちゃんと休めよな)

2016-06-25 プログラミングチップ＆ツール～お役立ちコード Comment:0

このページのトップへ

コメントの投稿

このページのトップへ

« 前の記事ホーム次の記事 »

このページのトップへ

DTM作曲活動のページ by tsukikagejou

HTMLそのまま出力君