SQLの窓

2014年04月03日


JavaScript : HTML 特殊文字を書き出すコード( ツール )

2014/4/3
先頭を指定して表示できるようにしましたので、通常の漢字エリアも表示できます。また、その位置から320文字を実際に取得するウインドウを開くようにしました。

さらに、文字の下には以下の3つのデータを付加しました
1) HTMLエンティティ
2) その16進表現
3) 実際の UTF-8 のコードの 16進表現


フリーフォントのオリジナル文字を割り当てている場所を拾い出す作業の為に最適化しました。『はらませにゃんこ』というフリーフォントが GIGAZINE で紹介されていたので、『フリーフォントで簡単ロゴ作成』に登録したのですが、武蔵システムの TTEdit で内部を確認すると、説明されていない文字も結構あったので、全て拾い出すのに、16進数の表現が必要になるのと、実際の文字を取得する都合があったので、このような最適化になりました。

▼ 『はらませにゃんこ』



<style>
.cbtn {
	width: 104px;
}
</style>
<script type="text/javascript">
function getCode(n) {
	n = parseInt(n);
	var __a = "";
	for( i = n; i <= n+319; i++ ) {
		__a += "&#"+i+";";
	}
	window.open("about:blank", "", "width=600,height=350").document.write("<textarea  style=\"width:500px;height:300px;\">" + __a + "</textarea>");

}
function writeCode(n) {
	n = parseInt(n);
	document.getElementById("target_no").value = n;
	var doc = document.getElementById("areaCode").contentWindow.document;
	doc.open();
	var str="";
	str+="<style type=\"text/css\"> \n";
	str+=".sphtml td { \n";
	str+="	font-size:36px; \n";
	str+="	font-family: \"ヒラギノ角ゴPro W3\",\"メイリオ\"; \n";
	str+="} \n";
	str+=".spc { \n";
	str+="	font-size:9px; \n";
	str+="} \n";
	str+=".sphtml table { \n";
	str+="	border-collapse: collapse; \n";
	str+="	border-style: solid; \n";
	str+="	border-color: #000000; \n";
	str+="	border-width: 1px; \n";
	str+="	background-color: #FFFFFF; \n";
	str+="} \n";
	str+=".sphtml td { \n";
	str+="	padding: 5px; \n";
	str+="	border-style: solid; \n";
	str+="	border-color: #000000; \n";
	str+="	border-width: 1px; \n";
	str+="	white-space: nowrap; \n";
	str+="} \n";
	str+=" \n";
	str+="</style> \n";
	doc.write(str);
	doc.write("<div class=sphtml>");
	doc.write("<table>");
	doc.write("<tr>");
	var cnt = 1;
	var _x;
	for( i = n; i <= n+999; i++ ) {
		_x = String.fromCharCode(i);
		_x = encodeURIComponent(_x)
		_x = _x.replace(/%/g,"")
		doc.write("<td>&#"+i+";<br><span class='spc'>&amp;#"+i+";</span><br><span class='spc'>"+i.toString(16).toUpperCase()+"</span><br><span class='spc'>"+_x+"</span></td>")
		if ( cnt % 10 == 0 ) {
			doc.write("</tr><tr>");
		}

		cnt++;
	}
	doc.write("</table>");
	doc.write("</div>");
	doc.close();
	document.getElementById("areaCode").style.height = Math.max(doc.documentElement.scrollHeight,doc.body.scrollHeight)+'px';
}
</script>
<input class="cbtn" type="button" value="1〜1000" onclick='writeCode(1)'>
<input class="cbtn" type="button" value="1001(3E9)〜" onclick='writeCode(1001)'>
<input class="cbtn" type="button" value="2001(7D1)〜" onclick='writeCode(2001)'>
<input class="cbtn" type="button" value="3001(BB9)〜" onclick='writeCode(3001)'>
<input class="cbtn" type="button" value="4001(FA1)〜" onclick='writeCode(4001)'>
<input class="cbtn" type="button" value="5001(1389)〜" onclick='writeCode(5001)'>
<br>
<input class="cbtn" type="button" value="6001(1771)〜" onclick='writeCode(6001)'>
<input class="cbtn" type="button" value="7001(1B59)〜" onclick='writeCode(7001)'>
<input class="cbtn" type="button" value="8001(1F41)〜" onclick='writeCode(8001)'>
<input class="cbtn" type="button" value="9001(2329)〜" onclick='writeCode(9001)'>
<input class="cbtn" type="button" value="10001(2711)〜" onclick='writeCode(10001)'>
<input class="cbtn" type="button" value="11001(2AF9)〜" onclick='writeCode(11001)'>
<br>
<input class="cbtn" type="button" value="12001(2EE1)〜" onclick='writeCode(12001)'>
<input class="cbtn" type="button" value="13001(32C9)〜" onclick='writeCode(13001)'>
先頭番号 <input id="target_no" class="cbtn" type="text"> <input class="cbtn" type="button" value="この番号から" onclick='writeCode(document.getElementById("target_no").value)'> <input  type="button" value="文字一覧取得(320)" onclick='getCode(document.getElementById("target_no").value)'>
<br>番号指定は、16進数を入力できます( 例: 0x1234 )
<br>
<iframe
	id="areaCode"
	frameborder="0"
	scrolling="yes"
	width="650"
	height="1"
></iframe>
<script>
writeCode(12832);
</script>

▼ 実行


先頭番号
番号指定は、16進数を入力できます( 例: 0x1234 )


関連する記事

posted by lightbox at 2014-04-03 03:00 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり