textareaを使ってHTMLの特殊文字をアンエスケープする 📝

特殊文字をアンエスケープしたいと思って、もろもろ調べました。

Mozillaのサイトによると、

< 👉 &lt;
> 👉 &gt;
" 👉 &quot;
' 👉 &apos;
& 👉 &amp;

こちらの5文字が特殊文字として挙げられています。

developer.mozilla.org

最小の構成であれば、この5文字をreplaceすることでアンエスケープすればOKなのかもしれません。
念の為、他の人が作ったライブラリ、unescape-htmlというパッケージのソースを確認してみると、

'use strict'

/**
 * un-escape special characters in the given string of html.
 *
 * @param  {String} html
 * @return {String}
 */

module.exports = function (html) {
  return String(html)
    .replace(/"/g, '"')
    .replace(/'/g, '\'')
    .replace(/:/g, ':')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
}

https://www.npmjs.com/package/unescape-html より引用

mozillaのサイトにあった5文字に加えて : が追加されています。

www.npmjs.com

では、この6文字をreplaceすればOKなのでしょうか、

ぱっと思いつくだけども、

© 👉 ©

など、他にも特殊文字はありそうです。

ホワイトリストを作るのではなく、なんとかロジックでアンエスケープできないものかと考えた結果、

function unescapeHtml(text) {
  const textarea = document.createElement('textarea');

  textarea.innerHTML = text;
  
  return textarea.value;
}

という感じで、一旦textareaのinnerHTMLに代入し、valueを返すという手法でエスケープすれば良いということに気づき、最近はこの方法でアンエスケープしています。