JavaScript で HTML エンティティをエンコードする簡単なソリューション

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript で HTML エンティティをエンコードする簡単なソリューシ …
Muhammad Muzammil Hussain 2023年10月12日
JavaScript JavaScript Encode
  1. String.prototype.toHtmlEntities() を使用して、文字列を HTML エンティティにエンコードする
  2. String.fromHtmlEntities() を使用して、HTML エンティティから文字列をエンコードする
  3. JavaScript で unescapeHTML() 関数を使用して HTML エンティティをエンコードする
JavaScript で HTML エンティティをエンコードする簡単なソリューション

この記事では、JavaScript で HTML エンティティをエンコードするための最良のソリューションについて説明します。以下のサンプルコードは、任意の文字列を HTML エンティティに変換し、文字列のプロトタイプに戻します。

String.prototype.toHtmlEntities() を使用して、文字列を HTML エンティティにエンコードする

次の JavaScript コードでは、

  • String.prototype.toHtmlEntities = function() は、.replace() メソッドを使用して HTML エンティティを含む文字列を返します。
  • .replace() は、指定された文字列の値を検索し、それを新しい目的の/指定された値に変更します。
  • .prototype は JavaScript のオブジェクトです。デフォルトでは、関数およびオブジェクトに関連付けられています。
  • String.charCodeAt() は、文字列内のインデックスを記述した文字の Unicode を返します。
/**
 * Conversion of string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
  return this.replace(/./gm, function(s) {
    // return "&#" + s.charCodeAt(0) + ";";
    return (s.match(/[a-z0-9\s]+/i)) ? s : '&#' + s.charCodeAt(0) + ';';
  });
};

String.fromHtmlEntities() を使用して、HTML エンティティから文字列をエンコードする

次の JavaScript ステートメントでは、次のものを作成しました。

  • HTML エンティティを含む string を受け取る String.fromHtmlEntities = function(string)。
  • この例では、.replace() で指定された文字列値は/&#\d+;/gm であり、文字列 s String.fromCharCode を返す関数に置き換えられます。
  • String.fromCharCode は、シーケンスによって生成された文字列を返すメソッドです。
/**
 * Creation of string from HTML entities
 */
String.fromHtmlEntities = function(string) {
  return (string + '').replace(/&#\d+;/gm, function(s) {
    return String.fromCharCode(s.match(/\d+/gm)[0]);
  })
};

その後、以下の機能を使用してください。

  • これは、特殊文字（†®¥¨©˙∫ø…ˆƒ∆...）を含む文字列で初期化される変数 var str です。
  • 関数 .toHtmlEntities は、この特殊文字列 var str で呼び出されます。
  • console.log は、ログボックスに値を表示する JavaScript のデフォルト関数です。
var str = "Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

コンソールからの出力は次のとおりです。

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

JavaScript で unescapeHTML() 関数を使用して HTML エンティティをエンコードする

これらの関数は、JavaScript コンパイラーでオンラインまたはオフラインで確認できます。ブラウザが HTML を読み取らずに文字列を表示するのに役立ちます。これは別の方法で行うことができます。HTML エンティティのオブジェクトを作成できます。

  • 変数 var htmlEntities には、特殊文字と記号のオブジェクトが含まれています。
  • unescapeHTML(str) 関数は、.replace() 条件を使用して文字列と戻り値を受け取ります。
var htmlEntities = {
  nbsp: ' ',
  cent: '¢',
  pound: '£',
  yen: '¥',
  euro: '€',
  copy: '©',
  reg: '®',
  lt: '<',
  gt: '>',
  quot: '"',
  amp: '&',
  apos: '\''
};

function unescapeHTML(str) {
  return str.replace(/\&([^;]+);/g, function(entity, entityCode) {
    var match;

    if (entityCode in htmlEntities) {
      return htmlEntities[entityCode];
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
      return String.fromCharCode(parseInt(match[1], 16));
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#(\d+)$/)) {
      return String.fromCharCode(~~match[1]);
    } else {
      return entity;
    }
  });
};

JavaScript にはネイティブバージョンの HTML エンティティはありません。ブラウザが HTML として解釈されないようにするための基本が必要な場合。PHP.js プロジェクトは、各 PHP のローカル容量を JavaScript に移植するタスクであり、モデルも含まれています。これらの線に沿って、私はそれを単純に保ち、その下を利用しました：

function EntitiesHtml(string) {
  return String(string)
      .replace(/&/g, '&amp;')
      .replace(/>/g, '&gt;')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;');
}