みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20211020154011p:plain

Mozillaのサイトによると、

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

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

developer.mozilla.org

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(/&quot;/g, '"')
    .replace(/&#39;/g, '\'')
    .replace(/&#x3A;/g, ':')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
}

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

それに加えて : が追加されています。

www.npmjs.com

しかし実際は、

© 👉 &copy;

など、他にも特殊文字はあります。

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

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

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

という感じで、一旦textareaのinnerHTMLに代入し、valueを返すという手法でエスケープしています。