【JS】HTML数値文字参照へエンコード、デコードするスクリプトをJavascriptで組んでみた

2015/08/25 2018/09/11

"あ" や "い" のような、HTML数値文字参照コードへ普通の文字を変換（エンコード）したり、逆にHTML数値文字参照コードから普通の文字へ変換（デコード）するスクリプトをJavascriptで作成してみました。

文字列をHTML参照文字へエンコード、デコードする

デモはコチラから。

HTML数値文字参照とは？実体参照と数値文字参照について

端的に書くと、HTMLに於いて、主に直接記述出来ない文字を記述するための記述方法です。

どういう事かといえば、HTMLでは、半角の「<」と「>」という記号をもって、タグとします。
この「<」と「>」をWordPressなどのブログで書くと、HTMLタグと認識され、意図しない表示なったりすることがまま、あります。

そこで、ここはタグに非ずということにスべく、「<」を記述の際には文字参照で「<」と書き、半角の「＜」とする、ということが必要になってきます。

文字参照には「実体参照」と「数値文字参照」という２種類あり、それぞれ下記のように記述します。
なお、今回は文字コードを暑かった「数値文字参照」を利用したコンバータを作ってみました。

実体参照

文字に与えられたキーワードを用いる文字参照。
例えば、半角「&」を記述する際は「&」、先に挙げた半角「<」「>」はそれぞれ、「<」「>」とします。

数値文字参照

本題の数値文字参照は、文字コードを用いる文字参照で、書式は半角で「&#文字コード;」とします。

なお、数値には10進数と16進数を用いることが出来ますが、16進数の方はブラウザやPCの環境によって使えなかったりするので10進数表記を用いた方が良いかとと思います。

参考

tgConvNumCharRefs デモ

デモはコチラから。

スクリプト

10進数の数値文字参照へエンコードするスクリプト

function convert10() {
    var result = "";
    var inputStrings = $("#numcharefs").val();      // 入力文字取得

    if (inputStrings == "") {
        alert('文字を入力してください');
    }
    inputStringsLength = inputStrings.length;       // 文字数取得

    // charCodeAt : 0スタートで、*番目の文字のUnicode("12371"や"12398")を返す
    // "&#" ";"と連結して、数値文字参照を作成。
    for (var i=0; i<inputStringsLength; i++) {
        result = result + "&#" + inputStrings.charCodeAt(i) + ";";
    }

    // 結果表示
    $('#resultConv').val(result);
}

function convert10() {

var result = "";

var inputStrings = $("#numcharefs").val(); // 入力文字取得

if (inputStrings == "") {

alert('文字を入力してください');

}

inputStringsLength = inputStrings.length; // 文字数取得

// charCodeAt : 0スタートで、*番目の文字のUnicode("12371"や"12398")を返す

// "&#" ";"と連結して、数値文字参照を作成。

for (var i=0; i<inputStringsLength; i++) {

result = result + "&#" + inputStrings.charCodeAt(i) + ";";

}

// 結果表示

$('#resultConv').val(result);

}

キモは、charCodeAtメソッドです。
ここに、ループで1文字ずつ渡してコンバートさせているだけです。

10進数の数値文字参照を通常文字にデコードするスクリプト

function decord10() {
    var result = "";
    var tmpStr = "";
    var decStrings = $("#strings").val();       // 入力文字取得

    if (decStrings == "") {
        alert('文字を入力してください');
    }

    // 置換
    tmpStr = decStrings.replace(/(<br>|<br \/>)/gi, '
');   // "<br>""<br />"を"
"に置換
    tmpStr = tmpStr.replace(/(\(|（)/gi, '(');              // 左カッコを"("に置換
    tmpStr = tmpStr.replace(/(\)|）)/gi, ')');              // 右カッコを"("に置換
    tmpStr = tmpStr.replace(/\s+/gi, " ");                  // スペースを" "に置換
    tmpStr = tmpStr.replace(/&#/g, "");                         // "&#"を削除
    tmpStr = tmpStr.substr(0 , (tmpStr.length-1));              // 右端の";"を削除
    decArray = tmpStr.split(";");                               // ";"文字で分割、配列化

    // fromCharCode : 
    result = String.fromCharCode.apply(null, decArray);         // デコード実行

    // 結果表示
    $('#resultDec').val(result);
}

function decord10() {

var result = "";

var tmpStr = "";

var decStrings = $("#strings").val(); // 入力文字取得

if (decStrings == "") {

alert('文字を入力してください');

}

// 置換

tmpStr = decStrings.replace(/( | )/gi, '

'); // " "" "を"

"に置換

tmpStr = tmpStr.replace(/(\(|（)/gi, '('); // 左カッコを"("に置換

tmpStr = tmpStr.replace(/(\)|）)/gi, ')'); // 右カッコを"("に置換

tmpStr = tmpStr.replace(/\s+/gi, " "); // スペースを" "に置換

tmpStr = tmpStr.replace(/&#/g, ""); // "&#"を削除

tmpStr = tmpStr.substr(0 , (tmpStr.length-1)); // 右端の";"を削除

decArray = tmpStr.split(";"); // ";"文字で分割、配列化

// fromCharCode :

result = String.fromCharCode.apply(null, decArray); // デコード実行

// 結果表示

$('#resultDec').val(result);

}

デコードの場合は、fromCharCodeメソッドに applyメソッドをひっつけて配列を渡せるようにし、一気に変換させるようにしています。

配列を作る際に タグを置換したりしていますが、あとで示す、利用方法に関わってくる、いわば個人的趣味であります。

16進数についてはあまり使用することも無いと思うので、デモのソースを見て調べてください。
さほど10進数と違う所はありません。

リファレンス

charCodeAtメソッド

charCodeAtメソッドは、指定された位置にある文字を文字コードに変換し、返す。

書式	charCode = string.charCodeAt(int);
戻り値	charCode : 文字コード
パラメータ	string : 対象の文字列 int : 何文字目の文字コードを取得するかの指定
使用例	var str = 'あいABab12'; document.write(str.charCodeAt(0), ' '); // 12354 document.write(str.charCodeAt(1), ' '); // 12356 document.write(str.charCodeAt(2), ' '); // 65 document.write(str.charCodeAt(3), ' '); // 66 document.write(str.charCodeAt(4), ' '); // 97 document.write(str.charCodeAt(5), ' '); // 98 document.write(str.charCodeAt(6), ' '); // 49 document.write(str.charCodeAt(7), ' '); // 50

fromCharCodeメソッド

fromCharCodeメソッドは、文字コードを文字に変換し、返す。
複数指定する場合は、パラメータをカンマ区切りで渡す。

書式	char = fromCharCode(code1, code2, ･･･)
戻り値	char : 文字
パラメータ	code1 : 対象の文字コード
使用例	document.write(String.fromCharCode(12354, 12356, 65, 66, 97, 98, 49, 50)); // あいABab12

デコーダーを実用的に使う

「歌詞タイム」の歌詞をデコードしてみる

ブラウザはGoogle Chromeを使い、藍井エイルの「コバルト・スカイ」って歌を「歌詞タイム」さんで検索します。

ありがちですが、右クリックもコピーペーストも出来ないようになっています。

Chromeの[三] → [その他のツール] → [ソースを表示]を選択。
もしくは[Ctrl]+[u]キー同時押して、HTMLソースを表示させます。

表示したソースを下の方へスクロールすると、295行目辺りから、なんだか見覚えのある文字列がズラーっと並んでいます。
変数名が lyrics ってんだから、歌詞なのでしょう。
ということで、この部分（シングルクォートの中だけ）をまるっとコピー。そしてデモページに行き、下のデコード用フォームへペースト、[10進数デコード]をクリック！

エクセレント。

タグ、半角/全角スペース、改行などを置換しているのはこういうことです。

-Javascript,jQuery
-エンコード, デコード, 数値文字参照, 歌詞, 歌詞タイム

: 【JS】jQueryでチェックボックスを一括でチェックし、背景色も変えるスクリプトを組んでみた

チェックボックスが大量にあるページなどのユーザビリティに向上を考え、一括でチェックできる仕掛けをjQuery使って作成してみました。ついでにチェックされた対象のラベルの背景色も変更できるスクリプトとなっています。

: 「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。

: 【JS】ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで作成する

ラジオボタンの選択値によって指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するJavascript（jQuery）の紹介です。

: 【JS】Javascriptで少数を切り上げ、切り捨て、四捨五入などする方法

以前のポスト（ミニロト番号ジェネレータ）でJavascriptにおける「小数点以下の切り上げ方法」を少し紹介しましたが、切り捨て、四捨五入する方法もまとめておきたいと思います。

: 【JS】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる

「グルーポン」や「シェアリー」など、クーポン系サイトでよく利用されているような、カウントダウンしていくタイマーが必要になったので、その設置方法の紹介です。今回は「jQuery Countdown」というライブラリを使用します。

PREV: 【CSS】「white-space:nowrap」で、タグクラウドを改行させずに表示させる
NEXT: Windows10のスタートボタンが効かなくなった場合にWindows Updateする方法

【JS】HTML数値文字参照へエンコード、デコードするスクリプトをJavascriptで組んでみた

文字列をHTML参照文字へエンコード、デコードする

HTML数値文字参照とは？実体参照と数値文字参照について

実体参照

数値文字参照

参考

tgConvNumCharRefs デモ

スクリプト

10進数の数値文字参照へエンコードするスクリプト

10進数の数値文字参照を通常文字にデコードするスクリプト

リファレンス

charCodeAtメソッド

fromCharCodeメソッド

デコーダーを実用的に使う

「歌詞タイム」の歌詞をデコードしてみる

【DIY】2x4や1x4など、SPF材サイズ早見表 (563,574)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (278,406)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (256,027)

【歴史】江戸幕府歴代将軍一覧 (143,288)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (130,128)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (129,524)

【JS】HTML数値文字参照へエンコード、デコードするスクリプトをJavascriptで組んでみた

文字列をHTML参照文字へエンコード、デコードする

HTML数値文字参照とは？ 実体参照と数値文字参照について

実体参照

数値文字参照

参考

tgConvNumCharRefs デモ

スクリプト

10進数の数値文字参照へエンコードするスクリプト

10進数の数値文字参照を通常文字にデコードするスクリプト

リファレンス

charCodeAtメソッド

fromCharCodeメソッド

デコーダーを実用的に使う

「歌詞タイム」の歌詞をデコードしてみる

HTML数値文字参照とは？実体参照と数値文字参照について