HarmonyOS鸿蒙Next中关于带有富文本标签的json串

HarmonyOS鸿蒙Next中关于带有富文本标签的json串

后端返回的json串中因为包含了一个带有富文本标签的字段导致解析失败

3 回复 
// 假设后端返回的原始字符串（包含未正确转义的富文本）
const rawMessage = '"messageContent": "<p><img src="https://sn.wgt.10086.cn/snsst/group1/M00/3E/97/Co7zBmILSe6AX1JUABA13xdHAUQ271.jpg" alt="" width="100%" height="auto" /></p>"';

// 提取完整<p>标签的函数
function getFullPTag(rawText: string): string | null {
  // 定位<p>的起始位置
  const pStartIndex = rawText.indexOf('<p>');
  if (pStartIndex === -1) {
    return null; // 未找到<p>标签
  }

  // 定位</p>的结束位置（注意包含</p>本身）
  const pEndIndex = rawText.indexOf('</p>', pStartIndex);
  if (pEndIndex === -1) {
    return null; // 未找到</p>标签
  }

  // 计算完整<p>标签的结束位置（</p>后面的位置）
  const fullEndIndex = pEndIndex + 4; // </p>的长度为4

  // 截取完整的<p>标签（包括<p>和</p>）
  return rawText.substring(pStartIndex, fullEndIndex);
}

// 调用函数获取结果
const fullPTag = getFullPTag(rawMessage);
console.log(fullPTag); 
// 输出：<p><img src="https://sn.wgt.10086.cn/snsst/group1/M00/3E/97/Co7zBmILSe6AX1JUABA13xdHAUQ271.jpg" alt="" width="100%" height="auto" /></p>

更多关于HarmonyOS鸿蒙Next中关于带有富文本标签的json串的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中处理带富文本标签的JSON字符串时，可直接使用CommonData或RichText组件解析。JSON需包含标准的HTML标签（如<b>、<font>），通过RichText的content属性加载。示例JSON结构：

{
  "content": "<b>加粗文本</b><font color='red'>红色文本</font>"
}

解析时调用RichTextController的loadData方法，需确保标签闭合且符合XML规范。系统会自动处理样式渲染，不支持自定义CSS。

在HarmonyOS Next中处理包含富文本标签的JSON数据时，建议采用以下解决方案：

  1. 使用JSON转义处理： 在接收JSON数据前，确保富文本内容中的特殊字符(如<、>、"等)已正确转义。可以使用JSON.stringify()对富文本字段进行预处理。

  2. 使用第三方解析库： 推荐使用Gson或FastJson等成熟JSON库，它们能更好地处理特殊字符和HTML标签。

  3. 后端配合处理： 建议后端在返回数据前对富文本字段进行Base64编码或HTML实体转义，例如将"<“转义为”<"。

  4. HarmonyOS Next中的具体处理：

// 使用@ohos.util解析JSON
try {
  let jsonObj = JSON.parse(jsonString);
  // 处理富文本内容
  let messageContent = decodeURIComponent(jsonObj.messageContent);
} catch (e) {
  console.error("JSON解析错误: " + e);
}
  1. 安全考虑： 渲染富文本时务必使用安全的方式，如使用专门的富文本组件或Web组件，避免XSS攻击。

对于您提供的具体案例，问题可能出在未转义的双引号上。建议后端返回时对img标签的src属性值进行转义处理。

回到顶部