问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

大模型输出的内容如何渲染到HTML中？

头像
We
    181039

    调用大模型采用流式方式输出内容，并且输出的内容有MD和普通的HTML格式，应该如何渲染的前端页面呢？

    我是用jquery中的html()当时内容并没有按照返回的格式显示出来

    前端javascripthtmlhtml5
    阅读 2.5k
    avatarAI BotBETA

    在处理大模型输出的内容，特别是当内容包含Markdown（MD）和HTML混合格式时，并希望这些内容能够在前端HTML页面中正确渲染，你可以采用以下步骤：

    1. 区分内容类型

    首先，你需要确定输出内容中哪些部分是Markdown，哪些部分是纯HTML。如果后端没有明确地标记或区分这两种类型，你可能需要实现一种解析机制来区分它们。

    2. Markdown转HTML

    对于Markdown部分，你可以使用JavaScript库如marked或showdown来将Markdown文本转换为HTML。这些库可以很容易地集成到你的前端代码中。

    示例：使用marked库

    首先，你需要通过npm或CDN将marked库添加到你的项目中。

    <!-- 引入marked库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    然后，在你的JavaScript代码中，你可以这样使用marked：

    // 假设你有一个包含Markdown文本的元素
var markdownText = $('#markdownContent').text(); // 假设这是你的Markdown内容

// 使用marked将Markdown转换为HTML
var htmlOutput = marked(markdownText);

// 将转换后的HTML插入到页面的某个部分
$('#outputContainer').html(htmlOutput);

    3. 渲染HTML

    对于已经是HTML格式的内容，你可以直接使用jQuery的.html()方法来渲染它。但是，如果你混合了Markdown和HTML，你可能需要先将Markdown转换为HTML，然后再将结果和纯HTML内容合并（如果它们不是完全独立的）。

    4. 安全性考虑

    在将任何从后端接收到的内容渲染到前端时，特别是当内容包含HTML时，你必须考虑到跨站脚本攻击（XSS）的风险。确保你的应用能够适当地清理或转义潜在的危险HTML标签或JavaScript代码。如果你使用的是像marked这样的库，它们通常会提供一些选项来清理HTML输出。

    5. 完整示例

    假设你的后端以某种方式区分了Markdown和HTML内容，并分别发送它们，你可以：

    • 使用marked将Markdown转换为HTML。
    • 直接使用.html()将纯HTML内容渲染到页面。
    • 将两者合并后渲染到页面上。
    // 假设markdownContent是Markdown文本，htmlContent是纯HTML
var markdownHtml = marked($('#markdownContent').text());
$('#htmlContentContainer').html($('#htmlContent').text()); // 渲染纯HTML
$('#combinedOutput').html(markdownHtml + $('#htmlContent').text()); // 合并渲染

    注意：在合并Markdown和HTML时，请确保它们的组合在视觉上是有意义的，并且没有破坏HTML的结构。如果Markdown生成的HTML和纯HTML之间有复杂的交互，你可能需要更仔细地控制它们的渲染方式。

    1 个回答
    得票最新
    头像
    15556882100
      2
      新手上路，请多包涵

      你可以强调使用html源代码输出，然后使用jquery的html方法替换元素

      也可以使用marked js库渲染

      function renderFinalContent() {
            var aiMsgElement = aiTemplate.find('.ai-msg');
            var markdownContent = aiMsgElement.text();
            var htmlContent = marked(markdownContent);
            aiMsgElement.html(htmlContent);
        }
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题