JavaScript を使用して HTML エンティティをデコードする

1. VanillaJavaScript を使用して HTML エンティティをデコードする
2. he ライブラリを使用して HTML エンティティをデコードする

HTML エンティティは、HTML によって予約された文字を表すために使用される文字コードのセットです。アンパサンド&で始まり、セミコロン ; で終わります。この画像は、それぞれのエンティティ名を持つ HTML 文字コードのリストを提供します。

この記事では、JavaScript を使用して以下の文字列をデコードする方法について説明します。この文字列には、a、b、c などのさまざまな文字と、&nbps;、<、' などの HTML 文字エンティティが含まれます。

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';

文字列全体が str 変数内に格納されます。HTML エンティティをデコードする方法は 2つあります。1つはバニラ JavaScript を使用する方法で、もう 1つは外部ライブラリを使用する方法です。

使用する外部ライブラリは he ライブラリです。これは、HTML エンティティをエンコードおよびデコードするために最も一般的に使用されるライブラリの 1つです。

VanillaJavaScript を使用して HTML エンティティをデコードする

HTML エンティティをデコードする最も簡単な方法の 1つは、バニラ JavaScript を使用することです。これを実現するために使用されるタグは、textarea です。

まず、文字列を入力として受け取る decodeEntity() という関数を作成します。str 変数を引数としてこの関数に渡します。

この関数内では、最初に document.createElement() を使用して textarea 要素を作成し、次にこの変数の参照を textarea 変数内に格納します。

function decodeEntity(inputStr) {
  var textarea = document.createElement('textarea');
  textarea.innerHTML = inputStr;
  return textarea.value;
}
console.log(decodeEntity(str));

出力：

var str = "Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please";
var he = require('he');
console.log(he.decode(str));

innerHTML プロパティを使用して、文字列 str を textarea 内に保存します。このステップで、ブラウザは自動的に str を適切な HTML 形式に変換します。すべての HTML エンティティがデコードされ、すべての HTML タグが保持されます。

最後に、textarea.value を使用して、デコードされた文字列値を返します。

he ライブラリを使用して HTML エンティティをデコードする

he は、JavaScript で記述された HTML エンティティをエンコードおよびデコードするための外部ライブラリです。このライブラリは、以下のコマンドを実行することで簡単にダウンロードできます。以下のコマンドを正常に実行するには、node.js（任意のバージョン）がシステムにインストールされている必要があります。

彼ライブラリの詳細については、このリンクにアクセスしてください。

npm install he

he ライブラリをインストールした後、require 関数を使用して JavaScript ファイル内にそのライブラリをインポートし、ライブラリの名前 he を文字列としてこの関数に渡すことができます。

次に、その参照を he という変数内に格納します。この変数を表すために任意の名前を使用できます。

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';
var he = require('he');
he.decode(str);

he ライブラリには、html と options の 2つのパラメータをとる decode() と呼ばれる関数があります。

html パラメータは、エンコードされた HTML エンティティで構成される文字列であり、渡す必要があります。options パラメーターはオプションであり、isAttributeValue と strict の 2つの値を取ります。この 2 番目のパラメーターは必要ないため、使用しません。

上記の str 変数を he.decode() 関数に渡すと、結果は次のようになります。

Give us some '<h2>time</h2>'&space<br>Please

外部 JavaScript ライブラリを使用して HTML エンティティをデコードするのは簡単です。