uinapp中的一个富文本问题

uinapp中的一个富文本问题
使用rich-text 和u-parse都不能达到效果

后台获取的数据:

<p>用户保护协议 <br/>欢迎使用我们的App!在您开始使用之前,请花些时间阅读和理解下面的用户保护协议,以确保您的权益得到充分保护。 <br/>1. 接受条款   通过使用本App,即表示您同意遵守本协议中的所有条款和条件。如果您不同意这些条款和条件,请勿使用本App。 <br/&....

得到错误的效果图:

img

【以下回答由 GPT 生成】

首先,uinapp中使用富文本需要使用rich-text组件来渲染富文本内容。而u-parse组件是用于解析HTML标签的工具,可以将HTML标签转化为小程序的组件。

接下来,你可以按照以下步骤来正确渲染富文本内容:

第一步:安装rich-text组件和u-parse组件 在你的项目目录下,执行以下命令安装组件:

npm install @vant/weapp --save

第二步:引入rich-text组件和u-parse组件 在你要使用富文本的页面中,引入rich-text组件和u-parse组件:

import { parse } from '@vant/weapp/index';

export default {
  components: {
    'u-parse': parse
  }
}

第三步:在页面中使用rich-text组件和u-parse组件来渲染富文本内容 在你的页面中,使用rich-text组件和u-parse组件来渲染富文本内容:

<rich-text :nodes="nodes"></rich-text>
data() {
  return {
    nodes: []
  }
},
created() {
  // 在这里获取到后台返回的富文本数据,并将其转化为小程序的节点数组
  let html = `<p>用户保护协议 <br />欢迎使用我们的App!在您开始使用之前,请花些时间阅读和理解下面的用户保护协议,以确保您的权益得到充分保护。</p>
              <p>1. 接受条款 &nbsp; 通过使用本App,即表示您同意遵守本协议中的所有条款和条件。如果您不同意这些条款和条件,请勿使用本App。</p>`;

  // 使用u-parse组件将HTML标签转化为小程序的组件
  let parsed = parse(html);

  // 将转化后的节点数组赋值给nodes
  this.nodes = parsed;
}

以上代码将会把后台返回的富文本数据转化为小程序的节点数组,并绑定在nodes属性上。

你可以尝试按照上述步骤进行操作,看看是否能够正确渲染富文本内容。如果还有其他问题,可以提供更多的具体信息,以便我提供进一步的帮助。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

把这些东西换成标尖括号

img


unescapeHTML: function(a) {
                a = "" + a;
                return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(
                    /&apos;/g, "'");
            }