【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
-エンコード, デコード, 数値文字参照, 歌詞, 歌詞タイム

: jQuery Cookie を使ってタブ切り替え状態を保持する方法

以前作成したタブ切り替えのスクリプトを拡張し、リロードや別ページから戻った場合でもアクティブになっているタブをアクティブのままにしておく、ということがしたくなったのですが、どうやらjQuery Cookieというライブラリを使えば出来そうだったので、実際にやってみました。

: CakePHP2 + jQueryUIでテキストボックスにオートコンプリート（オートサジェスト）機能をつける方法

テキストボックスにオートコンプリート（オートサジェスト）機能を、CakePHP2 + jQueryUI環境で作成したので作り方を備忘録としてポストします。

: 【JS】jQueryでフォームのdisabledを設定/解除する方法

よく使うのに毎回ググってる気がするのでメモ。jQueryを使い、フォームの disabled を設定/解除する方法を備忘録としてポストします。

: 【JS】選択済みのチェックボックスの個数をカウントするスクリプトをjQueryで組んでみた

選択されているチェックボックスの個数を取得して表示させたいというリクエストを受けましたので、Javascript（jQuery）を使用して作成してみました。スクリプトの解説をしつつ、いつの日かまた使うことがあると思うので、備忘録をかねてご紹介します。

: 【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

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

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

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

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

実体参照

数値文字参照

参考

tgConvNumCharRefs デモ

スクリプト

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

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

リファレンス

charCodeAtメソッド

fromCharCodeメソッド

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

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

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

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

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

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

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

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

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

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

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

実体参照

数値文字参照

参考

tgConvNumCharRefs デモ

スクリプト

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

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

リファレンス

charCodeAtメソッド

fromCharCodeメソッド

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

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

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