目录

Redirection After Special Text Recognition

Introduction

Special text recognition automatically detects information in a specific format or with specific semantics (such as links, dates, and phone numbers) in text content and assigns interaction functions to the information to implement one-tap redirection or quick operations. This capability allows users to efficiently complete tasks such as accessing web pages, adding events, and making calls without the need to copy and paste, in scenarios like reading, chatting, and office work.

Take social apps as an example. When a user receives a message containing special text during a chat, the system automatically identifies the content and renders it as a clickable link. After the user taps the link, they can quickly perform operations such as opening a web page, jumping to the app details page, making a call, or writing an email, greatly improving user experience and operation efficiency.

This document aims to help developers understand how to identify special text in a text segment in social apps, mark the text as a link, and enable interaction capabilities. Common special text types include:

After a user taps the special text, the system automatically displays an operation panel and performs the corresponding action based on the specific type.

Typical Scenarios

For example, when users send messages to each other in a social app, the messages may contain standard HTTP/HTTPS links, App Linking links, dates, phone numbers, addresses, and email addresses. These special texts are usually identified as clickable links.

After a user taps the text that has been processed by the system, the corresponding operation menu is displayed. After the user taps an option in the operation menu, the corresponding redirection is performed. The following figures show the effect of tapping various links.

Type Standard HTTP/HTTPS link App Linking link Date
Effect
Type Phone number Address Email address
Effect

All phone numbers in this document are for reference only and are not real phone numbers.

How to Implement

[h2]Key Technologies

The Text component provides the enableDataDetector attribute. You can set this attribute to true to enable special entity recognition for text. If a text contains standard HTTP/HTTPS links, App Linking links, dates, phone numbers, addresses, and email addresses, these special texts are automatically identified as clickable links. When an entity is tapped or right-clicked, the corresponding entity operation menu is displayed based on the entity type. When an entity is left-clicked, the first option in the menu is directly responded to.

The following table lists whether common text and input components support the enableDataDetector attribute.

Component Whether enableDataDetector Is Supported
Text Yes
TextArea No
TextInput No
RichEditor Yes
RichText No

[h2]Development Process

  1. Define a component with an avatar and text.

    Encapsulate the component such as TextLink. The parameters include the avatar resource (img) and text content (text).

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

  // ...
}

  2. Set the component style.

    Assign appropriate UI styles to elements such as avatar and text to enhance the display effect of chats or content streams.

    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. Enable special text recognition.

    Enable the enableDataDetector attribute for the Text component to automatically identify and mark special text such as links, dates, phone numbers, addresses, and email addresses in a text segment.

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

  4. Verify the recognition effect.

    Pass text content that contains standard HTTP/HTTPS links, App Linking links, dates, phone numbers, addresses, and email addresses to the TextLink component. The content is displayed in an interactive manner.

Sample Code