uni-app <rich-text>富文本展示时，h5端遇到注释代码（如<!--HTML-->）报错

uni-app <rich-text>富文本展示时，h5端遇到注释代码（如）报错

示例代码：

<view class="text-content">
<rich-text :nodes="profile"></rich-text>
</view>

操作步骤：

  • 在富文本代码里加入<!-- 这里可以是任何内容 -->

预期结果：

  • 正常展示富文本的内容

实际结果：

  • 报错，无任何内容展示

bug描述：

<rich-text>富文本展示时，h5端遇到注释代码（如<!--HTML-->）会报错，报错信息：Error in callback for watcher "nodes": "TypeError: Cannot read property 'children' of undefined"



| 开发环境          | 版本号   | 项目创建方式    |
|-------------------|----------|----------------|
| Windows           | win10    | HBuilderX      |
| HBuilderX         | 3.99     |                |
| 浏览器平台        | 版本号   |                |
| Edge              | 120.0.2210.77 |               |

更多关于uni-app <rich-text>富文本展示时，h5端遇到注释代码（如<!--HTML-->）报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以用字符串方式

<template> <view class="content"> <view class="uni-padding-wrap"> <view class="uni-title uni-common-mt"> 字符串类型 <text>\nnodes属性为String</text> </view> <view class="uni-common-mt" style="background:#FFF; padding:20rpx;"> <rich-text :nodes="strings"></rich-text> </view> </view> </view> </template> <script> export default { data() { return { strings: '
哈哈
' } } } </script>

更多关于uni-app <rich-text>富文本展示时，h5端遇到注释代码（如<!--HTML-->）报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢反馈，已确认问题，后续会修复。

在 uni-app 中使用 <rich-text> 组件展示富文本时，如果富文本中包含 HTML 注释（如 <!--HTML-->），在 H5 端可能会遇到报错。这是因为 <rich-text> 组件的底层实现对于 HTML 的解析和处理可能不支持某些标签或注释。

解决方案

  1. 移除注释
    在将富文本传递给 <rich-text> 组件之前，可以通过正则表达式或其他方式移除 HTML 注释。例如：

    const html = `<!--HTML--><p>Hello, World!</p>`;
const cleanedHtml = html.replace(/<!--[\s\S]*?-->/g, '');

<rich-text :nodes="cleanedHtml"></rich-text>

  2. 使用 v-html 指令
    如果你不需要跨平台兼容性，或者仅在 H5 端使用，可以考虑使用 v-html 指令来渲染富文本。v-html 是 Vue 的原生指令，可以直接渲染 HTML 字符串。

    <div v-html="html"></div>

    export default {
  data() {
    return {
      html: `<!--HTML--><p>Hello, World!</p>`
    };
  }
};
回到顶部