Обрабатывать текст, возвращенный из jquery ajax-запроса, перед вставкой в ​​DOM

Question

Я уже некоторое время пытаюсь отладить эту проблему, и мне нужна помощь.Я создаю портфель кода, и у меня есть HTTP-сервер, на котором размещены мои файлы html / css / javascript и другие файлы (такие как .java, .c, .py) с некоторыми из моих прошлых проектов.

Моя первоначальная цель состояла в том, чтобы использовать запрос http для извлечения файлов кода (например, файла java), затем вставить их содержимое в div на моей html-странице, а затем обернуть содержимое тегами 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 (несмотря на то, что он заключен в оболочку

тегов).Это испортило мою подсветку синтаксиса и другие настройки css в тегах div / code.

Так что теперь моя обновленная цель - получить файл Java в виде строки, экранировать теги html, затем вставить строку и перенестикак и раньше.

Вот мой служебный метод для перехода к html:

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

Я проверил его базовую функциональность вне контекста этого проекта, чтобы убедиться, что он работает как ожидалось.

И вот моя следующая попытка:

<code>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>

") .wrap ("");});}). 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 и code.

Я вижу в 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: (