web-dev-qa-db-ja.com

HTMLエンティティをエンコードおよびデコードするネイティブJavaScriptまたはES6の方法は？

JavaScriptまたはES6を使用して HTMLエンティティ をエンコードまたはデコードするネイティブな方法はありますか？たとえば、<は&lt;としてエンコードされます。 Node.jsには html-entities のようなライブラリがありますが、この一般的なニーズを既に処理しているJavaScriptに何かが組み込まれているように感じます。

javascriptnode.jshtml-entities
14
Marty Chang

JavaScript APIには、ASCII文字を同等の "html-entities"に変換するネイティブ関数はありません。これは、ソリューションの 始まりです および 簡単なトリック

3
A. Gille

Htmlをエスケープするためにes6を使用する素敵な関数：

const escapeHTML = str => str.replace(/[&<>'"]/g, 
  tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag] || tag));
1
asafel

独自のロール （注意-ほとんどのユースケースでは代わりにHEを使用してください）

Libのない純粋なJSの場合、 純粋なJavascriptを使用してHTMLエンティティをエンコードおよびデコード このようにできます：

let encode = str => {
  let buf = [];

  for (var i = str.length - 1; i >= 0; i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }

  return buf.join('');
}

let decode = str => {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
}

使用法：

encode("Hello > © <") // "&#72;&#101;&#108;&#108;&#111;&#32;&#62;&#32;&#169;&#32;&#60;"
decode("Hello &gt; &copy; &#169; &lt;") // "Hello &gt; &copy; © &lt;"

ただし、、このアプローチにはいくつかの欠点があります：

HEライブラリ （Htmlエンティティ）を使用します

使用法：

he.encode('foo © bar ≠ baz ???? qux'); 
// Output : 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// Output : 'foo © bar ≠ baz ???? qux'

関連する質問

0
KyleMit