HTMLエンティティは、HTMLにおける特殊文字のプレースホルダーです。<、>、&、"、'などの文字はHTML内で特定の意味を持ち、ドキュメントの構造を壊さないようにエスケープする必要があります。サーバーまたはユーザー入力からHTMLを取得する際には、これらのエンティティをデコードして正しく表示および操作する必要があることがよくあります。この記事では、JavaScriptを使用してHTMLエンティティをデコードする2つの方法について説明します。
目次
Vanilla JavaScriptによるHTMLエンティティのデコード
Vanilla JavaScriptは、ブラウザの組み込みDOMParserを使用してHTMLエンティティをデコードする簡単な方法を提供します。この方法は効率的で、外部ライブラリを必要としません。ただし、特にあまり一般的でないカスタムエンティティでは、すべてのエンティティを完全に処理できない場合があります。
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// 使用例：
const encodedText = '<p>This is a paragraph with & in it.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // 出力: This is a paragraph with & in it.
この関数は、DOMParserを使用して入力文字列をHTMLとして解析します。その後、ルート要素のtextContentプロパティによってデコードされたテキストが返され、HTMLタグが削除され、エンティティが置き換えられます。この方法は、入力に存在するHTMLタグも削除することに注意してください。
heライブラリによるHTMLエンティティのデコード
より包括的なデコード、特に幅広いエンティティに対しては、heライブラリが堅牢なソリューションです。軽量で、npmまたはCDNから簡単に利用できます。
インストール (npm):
npm install he
インストール (CDN – jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
インストール後、he.decode()関数を使用します。
// 'he'ライブラリがインクルードされていると仮定
const encodedText = '<p>This is a paragraph with & and ' in it.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // 出力: This is a paragraph with & and ' in it.
he.decode()は、'（シングルクォート）などの数値エンティティを含む、より幅広いエンティティを処理します。
方法の選択
どちらの方法もHTMLエンティティを効果的にデコードします。Vanilla JavaScriptアプローチは単純なケースに適しており、外部依存関係を回避します。複雑なシナリオや幅広いエンティティの場合、heライブラリはより信頼性の高いソリューションを提供します。セキュリティの脆弱性を防ぐために、常にユーザー入力をサニタイズしてください。