preタグのエスケープをしたい

Question

前提・実現したいこと

preタグ内の<>&等のエスケープをしているところで動作がうまくいかなくなってしまいました。
htmlドキュメントにpreタグを用意し、javascriptでのpreタグ内のエスケープを試みました。
pre内テキストは、そのままべた書き通りに表示させたいです。

該当のソースコード

<pre>
Map <String, Integer> hashMap = new HashMap<>();

hashMap.put("sato", 50);
hashMap.put("ito", 60);

System.out.println(hashMap.get("sato"));  //50
</pre>

上記HTMLを、

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

document.querySelectorAll('pre').forEach(pre =>{
    pre.innerHTML = htmlEscape(pre.innerHTML)
})

このようにエスケープしてみたところ、

Map <string, integer=""> hashMap = new HashMap&lt;&gt;();
 
hashMap.put("sato", 50);
hashMap.put("ito", 60);
 
System.out.println(hashMap.get("sato"));  //50
</string,>

画面上には上記のように表示されました。

試したこと

いくつか他のエスケープ方法を試してみましたが、結果は同じでした。
オートコンプリートみたいな挙動をしているところもあるのがなぜかわかりません。

Answer 1

HTMLを出力する段階でエスケープしないと、HTML構造がおかしい状態になるので適切な処理がされません。（ブラウザは不完全なHTMLも無理やりパースします）
HTMLの出力時にサーバ側で処理しましょう。

もし、preの中身がAjax等で受け取ったものであれば、innerText で処理すればエスケープされると思います。

【HTMLElement.innerText - レンダリングされた状態のテキスト | DOMリファレンス】
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/HTMLElement/innerText/

Comments

[kokyusyokuzai]

ありがとうございます。ブラウザが出力時に補完するのですね。知りませんでした。djangoを使っていますので、エスケープについて調べてみます。