HTMLのエスケープ処理をJSを使って行う方法

Question

<p>markup</p>

と書かれたソースコードのうち& < > ` " ' をエスケープ処理して&gt &ltなどに置換して

<p>markup</p>

とするjQueryを使った方法を教えて下さい。

ネットで探してみると以下のようなES6で書かれた関数を見つけましたがいまいち使い道がピンときません

  const htmlEscape = (str) => {
    if (!str) return;
    return str.replace(/[<>&"'`]/g, (match) => {
      const escape = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;',
        "'": '&#39;',
        '`': '&#x60;'
      };
      return escape[match];
    });
  }
  console.log(htmlEscape('& < > ` " ' + "'"));

よろしくお願いします

Comments

[m.ts10806]

「使い道」と「使い方」では大きく意味が違います。本当に「使い道」の方でしょうか。実際に試されたのでしょうか。

[Usagino]

試しました

[m.ts10806]

試した内容を書かないと誰もわかりませんよ。無駄なやり取りが何度も発生するので質問内容には漏れなく記載してください

Answer 1

ネットで探してみると以下のようなES6で書かれた関数を見つけましたがいまいち使い道がピンときません

これで十分だと思うのですが、具体的に何が問題なのでしょうか。念のために、Arrow Functionを使わない形に書き直しておきます。

function htmlEscape(str) {
    if (!str) return;
    return str.replace(/[<>&"'`]/g, function(match) {
      const escape = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;',
        "'": '&#39;',
        '`': '&#x60;'
      };
      return escape[match];
    });
}

なお、jQueryはDOM操作を拡張するライブラリですので、文字列の置き換えだけなら純粋なJavaScriptでもjQueryでも、ほとんど差はありません。

Answer 2

正規表現のreplaceがコールバックを返すところがイメージできないのでしょうかね
ちょっと無理があるかもしれませんがこういうやりかたもあります

var str="<hoge fuga='`&\"'>";
var escape = {
  '<': '&lt;',
  '>': '&gt;',
  '&': '&amp;',
  '"': '&quot;',
  "'": '&#39;',
  '`': '&#x60;'
  };
var str2=str1.split("").map(function(x){return typeof escape[x]==="undefined"?x:escape[x]}).join("");
console.log(str2);

Answer 3

jQueryとそのサンプルを読み込んでる前提で

$('p').text(htmlEscape($('p').text()));

とすれば置換されるのでは無いでしょうか