uni-app nvue页面rich-text使用html-parser.js解析html `<p>&ldquo;测试&rdquo;</p>` 不能正确解析为引号“”

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app nvue页面rich-text使用html-parser.js解析html <p>&ldquo;测试&rdquo;</p> 不能正确解析为引号“”

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.15

手机系统：
Android

手机系统版本号：
Android 12

手机厂商：
模拟器

手机机型：
2201116SC

页面类型：
nvue

vue版本：
vue2

打包方式：
云端

项目创建方式：
HBuilderX

示例代码：

import parseHtml from "@/utils/html-parser.js"  

let testHtml="<p>&ldquo;测试&rdquo;</p>"
const getNodes = parseHtml(testHtml)
this.nodes = getNodes  

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

操作步骤：

import parseHtml from "@/utils/html-parser.js"  

let testHtml="<p>&ldquo;测试&rdquo;</p>"
const getNodes = parseHtml(testHtml)
this.nodes = getNodes  

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

预期结果：

"测试"

实际结果：

“测试”

bug描述：

在nvue页面使用rich-text使用html-parser.js方法解析html <p>&ldquo;测试&rdquo;</p> 不能正确解析为引号“”


Harmonyos Next教程
1 回复

在uni-app中使用nvue页面时，rich-text组件通常用于显示富文本内容。然而，当涉及到HTML解析，尤其是包含特殊字符如中文引号（“ 和 ”），直接使用html-parser.js或类似库可能无法正确解析这些字符，因为它们需要特定的HTML实体编码。

在HTML中，标准的引号字符是"（双引号）和'（单引号），而中文引号（“、”、‘、’）并不是HTML标准实体，这可能导致解析错误。为了确保这些字符能正确显示，你可以考虑在将数据传递给rich-text组件之前，将中文引号转换为它们的HTML实体编码（如果存在的话，通常我们会转换为普通的英文引号）或Unicode编码。

以下是一个示例，展示如何在JavaScript中预处理HTML字符串，将中文引号转换为英文引号，然后再通过rich-text组件显示：

// 假设这是你的原始HTML字符串
let htmlString = '<p>&ldquo;测试&rdquo;</p>';

// 创建一个函数来替换中文引号
function replaceChineseQuotes(html) {
    return html.replace(/&ldquo;/g, '&quot;')  // 将左双引号替换为HTML实体双引号
               .replace(/&rdquo;/g, '&quot;') // 将右双引号替换为HTML实体双引号
               // 如果需要处理单引号，也可以添加类似替换
               // .replace(/&lsquo;/g, "'")
               // .replace(/&rsquo;/g, "'");
}

// 使用该函数处理HTML字符串
let processedHtmlString = replaceChineseQuotes(htmlString);

// 在nvue页面的data中设置这个处理过的HTML字符串
export default {
    data() {
        return {
            htmlContent: processedHtmlString
        };
    }
};

// 在nvue页面的template中使用rich-text组件
<template>
    <rich-text :nodes="htmlContent"></rich-text>
</template>

注意：

  1. 上述代码示例中，&ldquo;和&rdquo;被替换成了&quot;，这是HTML中表示双引号的实体。如果你的应用场景需要保留中文引号样式，但希望它们能被正确解析和显示，你可能需要考虑使用CSS样式或Web字体来直接支持这些字符，而不是依赖HTML实体。
  2. 在nvue环境中，由于它基于Weex引擎，对HTML和CSS的支持有限，因此确保你的解决方案与Weex的兼容性也很重要。
  3. 如果rich-text组件仍然无法正确显示，检查是否有其他CSS或JavaScript干扰了显示结果。
回到顶部