uni-app小程序如何把后端接口返回的html,在页面上加载出来

<template>
    // 渲染后端返回的html
      <view>
        <rich-text :nodes="contentHtml"></rich-text>
      </view> 
</template>

methods: {
     testHtml() {
        testHtml().then((res) => {
           const { content } = res[0];
           // 将style样式 内联到标签内
          const contentHtml = this.convertStyles(content);
          // 剔除html文件中的无用标签
          this.contentHtml = this.extractBody(contentHtml);
         })
         .catch((err) => {
           console.log(err, "err");
        });
     },
 convertStyles(html) {
      // 提取style标签内容
      const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/i;
      const styleMatch = html.match(styleRegex);
      if (!styleMatch) return html;

      // 解析CSS规则
      const cssRules = styleMatch[1]
        .replace(/\/\*.*?\*\//g, "") // 去除注释
        .split("}")
        .filter((rule) => rule.trim());

      // 创建样式映射表
      const styleMap = {};
      cssRules.forEach((rule) => {
        const [selector, styles] = rule.split("{");
        if (!selector || !styles) return;
        const cleanSelector = selector.trim().replace(/^\./, "");
        styleMap[cleanSelector] = styles.trim();
      });

      // 替换class为内联样式
      return html.replace(/class="([^"]*)"/g, (match, classes) => {
        const appliedStyles = classes
          .split(" ")
          .map((cls) => styleMap[cls.trim()])
          .filter(Boolean)
          .join(";");
        return appliedStyles ? `style="${appliedStyles}"` : "";
      });
    },
    extractBody(html) {
      const bodyRegex = /<body[^>]*>([\s\S]*)<\/body>/i;
      const match = html.match(bodyRegex);
      return match ? match[1] : html;
    },

}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容