鸿蒙开发：解决无法解析html的问题

问题描述

   我需要从http请求返回来的html中做下一步的数据解析。目前已经使用http request获取到了data.result，但是想要解析result的html的时候，却发现没有相关的库。

如下是我获取到的result:  

   截止本文章发布日，作者查询资料，在鸿蒙开发中，可以使用RichText和Web组件直接渲染html。但是却无法像Jsoup库一样解析具体的内容出来。

   查询了相关内容，鸿蒙确实有有类似的库，链接如下：

gitee:Jsoup库

  但是不凑巧的是，最近的IDE更新了，该库不适用于最新版的IDE,之后也许会更新。

  所以，为了解决我的需求，我只能更换思路，试试能不能手动解析出来：

解决问题的过程：
我的需求是解析html的原因是想要获取里面的DOM元素，

但是打印控制台发现全是<link>，没有body,这就很奇怪。想要使用正则表达式截取内容失败

于是乎我使用了RichText渲染返回的html，但是发现他可以渲染完整的页面出来。那么说明问题处在result中。

后面我查询资料的过程中，偶然发现，日志打印的长度有限！也就是result完整返回了，但是没有全部打印在控制台中。

那么问题就很好解决了，可以使用正则表达式截取里面的内容！问题解决

import { router } from '@kit.ArkUI'
import { http } from '@kit.NetworkKit';

@Entry
@Component
struct WDYY_show {
  @State Param: object = router.getParams();
  @State Text: string = '';

  aboutToAppear() {
    //获取http链接中的内容
    this.getUrlInfo();
  }

  //访问链接
  async getUrlInfo(): Promise<void> {
      try {
        const res = await http.createHttp().request(
          `${this.Param?.['Url']}`,
          {
            method: http.RequestMethod.GET,
            header: {
              'Content-Type': 'application/json',
            },
          }
        )

        // 将响应的 HTML 内容转换为字符串
        const htmlContent = res.result.toString();
        console.log('响应内容：', htmlContent);

        // 使用正则表达式匹配所有 <meta> 标签
        const metaTags = htmlContent.match(/<meta[^>]*>/g);

        if (metaTags) {
          // 查找 <meta> 标签中包含 "og:title" 的那一项（目标项）
          const ogTitleMeta = metaTags.find(tag => tag.includes('property="og:title"'));

          if (ogTitleMeta) {
            // 使用正则提取 content 属性中的值
            const contentMatch = ogTitleMeta.match(/content="([^"]+)"/);

            if (contentMatch) {
              const contentValue = contentMatch[1];  // 提取 content 属性的值
              console.log('og:title content 值:', contentValue);
              this.Text = contentValue;  // 保存 content 值到 Text
            }
          }
        }

      } catch (error) {
        console.error('网络请求发起错误：', error);
      }
  }

  build() {
    Column() {
      Text(this.Text)
    }
    .height('100%')
    .width('100%')
  }
}

结果： 

 

如果内容对你有帮助，还请点个赞
如果内容有误，或者哪里有问题，欢迎评论区留言