Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/10 (日)

HTMLタグの実体参照変換

| 15:40 | HTMLタグの実体参照変換 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - HTMLタグの実体参照変換 - 雪乃☆雫のなでしこ日和 HTMLタグの実体参照変換 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 珍しく、実用の物を作った。

 なでしこ3では、HTML埋め込みにすることが多いので、ブログにUPする時には、タグの記号を変換しないと、おかしなコトになっちゃうんですよねぇ~。

 HTMLタグの使える掲示板なんかも、そうでしたね。

 のことを、ワタシは、わりと最近知ったのです(バカ;)

 これまでは、ふつーにエディタ置換機能を使っていたんだけど、タグは前と後ろがあるから、二やらなきゃならないしさー。毎、どっちがどっちだったか分かんなくなるしさー。

 ちなみに 「<」→「小なり」→「less than」→「&lt;」 と 「>」→「大なり」→「greater than」→「&gt;」 とゆうことらしく、のように意味と結びつけてようく覚えたつもりでも、次の時にはやっぱり「えぇっと・・?」となるダメダメっぷり;;;

 ・・・とゆうわけで、こんなことこなでしこさんにやってもらうのが、おらく世の中の正しい使い道なんだろう。

 なでしこ1のほうが、断然すぐに作れる気がしたけど、折角なので、なでしこ3でやってみた。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" href="../common.css">

<title>HTMLタグの実体参照変換</title>

<style type="text/css">
<!--
body		{background-color:#FFF0F0}
div.base	{width:640px;}
button		{padding:10px 20px;}
label		{font-size:large; font-weight:bold; padding-left:10px;}
h3			{margin:0; padding:0;}
textarea	{width:100%}
span.s		{font-size:x-small; font-weight:normal;}

 -->
</style>

</head>

<body>
<!-- なでしこを使うために必要なスクリプト -->
<script src="https://nadesi.com/v3/0.1.5/release/wnako3.js?run"></script>
<!-- type="なでしこ" のスクリプトが実行される -->
<script type="なでしこ">
#-----------------------------------------------------------------------
# ここになでしこのプログラムを記述
#-----------------------------------------------------------------------
データ=cb=[0,1,1,0,0]
元文字=[「&」,「<」,「>」,「"」,「((」]
実体参照文字=["&amp;","&lt;","&gt;","&quot;","&#40;&#40;"]

「#reset」の「onclick」に「テキストクリア」をDOMイベント設定。
「#henkan」の「onclick」に「実体参照変換」をDOMイベント設定。
5
 C=回数-1。
 「#check{C}」の「onchange」に「チェック{C}」をDOMイベント設定。
ここまで。

●実体参照変換
  データ=「#code」のDOMテキスト取得。
  5
    C=回数-1。
    もしcb[C]=1ならば、データ=データの元文字[C]を実体参照文字[C]に置換。
  ここまで。
  「#result」にデータをDOMテキスト設定。
ここまで。

●テキストクリア
  「#code」にDOMテキスト設定。
  「#result」にDOMテキスト設定。
ここまで。

#-----------------------------------------------------------------------
●チェックオフオン(Noで)
  もしcb[No]=オンならばcb[No]=オフ。
  違えばcb[No]=オンここまで。

●チェック0
  0でチェックオフオンここまで。

●チェック1
  1でチェックオフオンここまで。

●チェック2
  2でチェックオフオンここまで。

●チェック3
  3でチェックオフオンここまで。

●チェック4
  4でチェックオフオンここまで。
#-----------------------------------------------------------------------
</script>

<H1>HTMLタグの実体参照変換</H1>
<HR>
<div class="base">
  <fieldset>
  <legend><B>変換する項目</B></legend>
    <label><input type="checkbox" id="check1" checked="checked"> < <span class="s">(小なり)</span></label> 
    <label><input type="checkbox" id="check2" checked="checked"> > <span class="s">(大なり)</span></label> 
    <label><input type="checkbox" id="check0"> & <span class="s">(アンパサンド)</span></label> 
    <label><input type="checkbox" id="check3"> " <span class="s">(二重引用符)</span></label> 
    <label><input type="checkbox" id="check4"> (( <span class="s">(二重の丸括弧)</span></label>
  </fieldset>

  <P><h3>変換元</h3>
  <textarea id="code" rows="10"></textarea><BR>
  <button id="henkan">変換</button>
  <button id="reset">クリア</button></P>
  
  <P><h3>変換後</h3>
  <textarea id="result" rows="15"></textarea></P>
</div>
</body>
</html>

http://www.geocities.jp/snowdrops890/wnako3_test/html_escape.html

 ちょっとチェックボックスを使ってみましたよ☆

 チェックボックスのオフオンを取れる命令はのところ無いもようですが、フラグを立てて「onchange」でトグルさせています。


 実体参照文字自体をのまま表示したい時は、「&」を変換すればOK。

 二重の丸括弧は数値文字参照ですケド、これは何かとゆうと、はてな記法ではなんだか二重の半角の丸括弧で括られた部分が、脚注として認識されてしまうらしく、プログラムで括弧で括った計算が結構引っかかってしまうんだよね;

 これまでは、全角にしたりしてましたが、もののついでで変換できるようにしてみた。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170910