我正在尝试定制一个我在网上找到的旧聊天机器人项目，我把它用作一个简单的"命令机器人"，它根据用户输入返回特定的响应。
然而，它几乎全文本的基础上，只有我不能呈现HTML标签。我希望它能够返回HTML元素，如按钮，列表，图像，粗体和所有强调，等等...
我不知道我该怎么做。到目前为止，它似乎渲染anchor tags罚款。
此外，我希望它将\n解释为换行符或将\s解释为空格。
我该怎么做呢？下面是我目前为止的代码：

let search = `<a href='http://google.com' target="_blank">Google.com</a>`;

function chatBot() {

    this.input;

    this.respondTo = function (input) {

        this.input = input.toLowerCase();

        if (this.match('(/help|!help|help)(\\s|!|\\.|$)'))
            return `Available commands: /userguides`;

        if (this.match('google'))
            return `Try this: <a href='http://google.com' target="_blank">Google.com</a>`;

        if (this.match('bracketed matter') && this.match('under this title'))
            return `here's the solution`;

        if (this.match('(search)'))
            return search;

        if (this.input == 'noop')
            return;

        return [`Sorry, the command you entered doesn't exist.`, `Type /help to see all available commands.`];
    }

    this.match = function (regex) {

        return new RegExp(regex).test(this.input);
    }
}

/******************************************************************************************************************* */

$(function () {

    var you = 'You';
    var system = 'System';

    var delayStart = 300;
    var delayEnd = 700;

    // initialize
    var bot = new chatBot();
    var chat = $('.chat');
    var waiting = 0;
    $('.status').text(system + ' is typing...');

    // submit user input and get chat-bot's reply
    var submitChat = function () {

        var input = $('.input input').val();
        if (input == '') return;

        $('.input input').val('');
        updateChat(you, input);

        var reply = bot.respondTo(input);
        if (reply == null) return;

        var latency = Math.floor((Math.random() * (delayEnd - delayStart)) + delayStart);
        $('.status').css('display', 'block');
        waiting++;
        setTimeout(function () {
            if (typeof reply === 'string') {
                updateChat(system, reply);
            } else {
                for (var r in reply) {
                    updateChat(system, reply[r]);
                }
            }
            if (--waiting == 0) $('.status').css('display', 'none');
        }, latency);
    }

    // add a new line to the chat
    var updateChat = function (party, text) {

        var style = 'you';
        if (party != you) {
            style = 'other';
        }

        var line = $('<div><span class="party"></span> <span class="text"></span></div>');
        line.find('.party').addClass(style).text(party + ':');
        line.find('.text').html(text);

        chat.append(line);

        chat.stop().animate({ scrollTop: chat.prop("scrollHeight") });

    }

    // event binding
    $('.input').bind('keydown', function (e) {
        if (e.keyCode == 13) {
            submitChat();
        }
    });
    $('.input a').bind('click', submitChat);

    // initial chat state
    updateChat(system, `Hi there. Type /help to see all available commands.`);

});

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

/*****************************************************/

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    background-color: #fafafa;
}

.container {
    width: 600px;
    margin: 50px auto 20px;
}

.title {
    font-size: 30px;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
    text-shadow: #ccc 2px 2px 1px;
    padding-bottom: 5px;
}

.chat {
    border: 1px solid #ccc;
    min-height: 20vh;
    overflow-y: scroll;
    background-color: white;
    border-radius: 0;
    resize: vertical;
}

.chat div {
    margin: 10px 12px 15px;
    line-height: 15px;
}

.chat .party {
    font-weight: bold;
}

/* .chat .text {
    background-color: #ff7f50;
    padding: 5px;
    border-radius: 10px;
} */

.chat .you {
    color: #1976d2;
}

.chat .other {
    color: #43a047;
}

.status {
    position: absolute;
    padding: 3px 0;
    color: #666;
    display: none;
    font-size: 11px;
}

.input {
    margin-top: 20px;
}

.input input {
    vertical-align: top;
    float: left;
    border: 1px solid #ccc;
    padding: 5px;
    width: 480px;
    margin: 0;
    border-radius: 5px;
}

.input a {
    vertical-align: top;
    float: right;
    font-weight: bold;
    border: 1px solid #ccc;
    background-color: #efefef;
    padding: 7px 35px;
    color: black;
    text-decoration: none;
    border-radius: 5px;
}

.input a:hover {
    background-color: #ddd;
    cursor: pointer;
}

h9 {
    padding-left: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Chat Bot</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="title">Chat Bot</h1>
        <div class="chat"></div>
        <div class="status"></div>
        <div class="input">
            <input type="text" placeholder="Type something..." />
            <a>Send</a>
        </div>
    </div>
</body>

</html>

我还在学习JS，这是一个项目，我正在使用这样做，但我真的卡住了。我会感谢任何帮助。谢谢!