<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;
},
}
uni-app小程序如何把后端接口返回的html,在页面上加载出来
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 直奔主题,题目上的两个坑解决方法如下: 一、uni-app web-view组件 打包之后ios显示错误或者显示不...
- 这些网页是用 mui 开发的,需要将 mui 的返回关闭 可以在 web-view 里向 这些页面注入 这段js
- 最近撸代码时发现这样一个问题,原本的项目中是走的前端排序,但是又因为前端走了分页,所以导致每次排序都只是排当前的1...
- 这种情况要么是路径错了,要么是路径不存在,我出现的路径不存在的情况,因为配置的history模式,这就会导致后台如...