在插入DOM

Question

一段时间以来，我一直在努力调试此问题，我需要帮助。我正在构建代码组合，并且我拥有一个HTTP服务器，该服务器同时托管我的html / css / javascript文件以及其他文件（例如，.java，.c，.py）以及过去的一些项目。

我的最初目标是使用http请求检索代码文件（例如，java文件），然后将其内容插入到我的html页面的div中，然后用pre和code标签包装内容。我通过以下方法成功实现了这一目标：

const readFile = function(filepath, id) {
    return new Promise(function(resolve, reject) {
       $(id).load(filepath, function(response, status, http) {
           if(status === "success") {
               resolve($(id).wrap("<pre>&lt/pre>")
                            .wrap("<code class='language-java'></code>"));
           }
           else if(status === "error") {
               reject(Error("http.status" + ": " + http.statusText))
           }
       }) ;
    });
};

然后我遇到另一个问题：Java通用语法（例如：ArrayList ）对于打开html标签（尽管被包裹在

标签中）感到困惑。这弄乱了我的语法荧光笔和div / code标签中的其他CSS设置。

所以现在我更新的目标是将Java文件作为字符串获取，转义html标签，然后插入字符串并像以前一样包装。

这是我逃脱html的实用方法：

String.prototype.escapeHtml = function() {
    const tagsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};

我已经在项目范围之外测试了其基本功能，以确认它是否按预期工作。

这是我的下一个尝试：

const readFile = function(filepath, id) {
    let $div = $(id);
    return new Promise(function(resolve, reject) {
        $.ajax(filepath, {
            type: 'GET',
            dataType: 'text'
        }).done(function (response) {
            resolve(function () {
                response = response.escapeHtml();
                $div.html(response);
                $div.wrap("<pre></pre>")
                    .wrap("<code class='language-java'></code>");
            });
        }).fail(function(jqXHR, textStatus, errorThrown) {
            reject(Error("http.status" + ": " + textStatus));
        });
    });
};

下面是如何调用上述功能的示例：

$(function() {
    var $game = $("#Game");
    readFile("http://localhost:5000/CodeSamples/Java/BlackJack/Game.java", "#Game")
        .then(Prism.highlightElement($game),
              function(error) { alert(error) });
});

我希望.ajax请求应该返回一个包含文件内容的字符串，然后将使用escapeHtml（）处理该字符串，然后将生成的处理后的字符串插入div中，并包装在其中pre和代码标签。

我可以在ChromeDevTools中看到正在返回文件内容，但是随后出现错误：

Uncaught TypeError: Cannot read property 'replace' of undefined
    at Object.highlightElement (prism.js:3)
    at HTMLDocument.<anonymous> (blackjack.js:52)
    at j (jquery.js:3099)
    at Object.fireWith [as resolveWith] (jquery.js:3211)
    at Function.ready (jquery.js:3417)
    at HTMLDocument.I (jquery.js:3433)

目标div为空/没有内容插入DOM：（