目录

特殊文本识别跳转

概述

特殊文本识别，是指自动检测文本内容中具备特定格式或语义的信息（如链接、日期、电话号码等），并将其赋予交互功能，实现一键跳转或快捷操作。这一能力让用户在阅读、聊天、办公等场景下，无需复制粘贴即可高效完成访问网页、添加日程、拨打电话等任务。

以社交应用场景为例，当用户在聊天过程中收到包含特殊文本的消息时，系统会自动识别这些内容并渲染为可点击的链接。用户点击后，即可快速完成如打开网页、跳转应用详情、拨打电话、写邮件等操作，极大提升了用户体验和操作效率。

本文主要是为了帮助开发者了解在社交应用中，如何识别出一段文字中的特殊文本，并将其标记为链接的格式，赋予其交互能力。常见的特殊文本类型包括：

用户点击这些特殊文本后，系统自动弹出操作面板，根据具体类别执行对应动作。

典型场景

以社交应用中好友之间相互发送聊天信息为例，这些信息中可能会包含标准HTTP/HTTPS链接、App Linking链接、日期、电话号码、地址、邮箱等。这些特殊的文本，通常会被识别为可点击的链接格式。

用户点击这些经过系统底层处理过的文本后，会拉起相应的操作菜单，点击操作菜单中的可选项后，则会进行相应的跳转处理。各种链接点击后效果如下图所示。

类型 标准HTTP/HTTPS链接 App Linking链接 日期
效果图
类型 电话号码 地址 邮箱
效果图

本文中所有电话号码均为示例用途，非真实可用号码。

实现原理

[h2]关键技术

Text组件提供了enableDataDetector属性，通过将该属性设置为true，即可进行文本特殊实体识别。一段文字中若包含标准HTTP/HTTPS链接、App Linking链接、日期、电话号码、地址、邮箱等，则这些特殊文本会被自动识别为可点击的链接格式。手势点击和鼠标右键点击实体，会根据实体类型弹出对应的实体操作菜单，鼠标左键点击实体会直接响应菜单的第一个选项。

常用的文本与输入组件是否支持设置enableDataDetector属性如下表所示。

组件 是否支持enableDataDetector属性
Text 是
TextArea 否
TextInput 否
RichEditor 是
RichText 否

[h2]开发流程

  1. 自定义带头像和文本信息的组件。

    封装如TextLink组件，参数包含头像资源（img）和文本内容（text）。

    @Component
export default struct TextLink {
  @State enableDataDetector: boolean = true;
  public img: string | PixelMap | Resource = $r('app.media.Public_avatar');
  public text: ResourceStr = '';

  // ...
}

  2. 组件样式设置。

    为头像、文本等元素分配合适UI样式，提升聊天或内容流的展示效果。

    Row() {
  Image(this.img)
    .width(36)
    .height(36)
  Row() {
    Text(this.text)
      .enableDataDetector(this.enableDataDetector)
  }
  .borderRadius({
    topLeft: 2,
    topRight: 16,
    bottomLeft: 16,
    bottomRight: 16
  })
  .margin({ left: 8 })
  .padding({
    left: 12,
    right: 12,
    top: 12,
    bottom: 12
  })
  .backgroundColor(Color.White)
  .constraintSize({ maxWidth: 300 })
  .width('100%')
}
.alignItems(VerticalAlign.Top)
.margin({
  left: 16,
  right: 16,
  bottom: 12
})
.width('100%')

    实现效果如下图所示。

  3. 启用特殊文本识别。

    在Text组件上启用enableDataDetector属性，即可实现对一段文字中的链接、日期、电话号码、地址、邮箱等特殊文本进行自动识别并标记。

    Text(this.text)
  .enableDataDetector(this.enableDataDetector)

  4. 识别效果验证。

    分别传入包含标准HTTP/HTTPS链接、App Linking链接、日期、电话号码、地址、邮箱等文字内容到TextLink组件中，均以可交互形式显示。

示例代码