【ArkUI 文本展示系列】六：控制文本的交互行为（二）Span嵌套控制

Span支持的通用事件只有点击事件onClick和悬浮事件onHover。

这里以用场景“点击url在自定义浏览器中打开”为例，说明Span如何控制交互行为。

import { common, Want } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct demo {
  @State text: string = '这事一段文本www.example.com这是另一段文本www.example.cn'
  @State strArr: Array<string> = []
  @State urlArr: Array<string> = []

  aboutToAppear(): void {
    this.splitUrls(this.text);
  }

  // 分割字符串，找出其中的url
  splitUrls(str: string) {
    // 使用正则表达式匹配URL（支持http/https协议或www开头的地址）
    let pattern = /(https?:\/\/|www\.)[\w.-]+\.[\w.-]+[\w\/?#=.-]*/g;
    let urls = str.match(pattern) as Array<string>
    if (urls && urls.length > 0) {
      this.strArr = this.splitString(str, urls)
      this.urlArr = urls
    }
  }

  // 将所有URL作为分隔符，将原始文本分割成文本片段数组
  splitString(str: string, separators: Array<string>) {
    return str.split(new RegExp(separators.join('|'), 'g'))
  }

  // 跳转到应用中打开链接
  openInBrowser(url: string) {
    // 如果URL不以http开头，需要添加前缀
    const fullUrl = url.startsWith('http') ? url : `https://${url}`;
    const want: Want = {
      uri: fullUrl,
      action: 'ohos.want.action.viewData' // 系统标准动作，用于打开链接，可以替换成其他应用
    };
    const context: common.UIAbilityContext = this.getUIContext().getHostContext()! as common.UIAbilityContext
    context.startAbility(want).then(() => {
      console.info('跳转浏览器成功');
    })
      .catch((err: BusinessError) => {
        console.error(`跳转失败:  ${err.message}`)
      });
  }

  build() {
    Column({ space: 20 }) {
      Text() {
        ForEach(this.strArr, (str: string, index: number) => {
          Span(str)
          if (this.urlArr.length > index) {
            Span(this.urlArr[index])
              .fontColor(Color.Blue)
              .onClick(() => {
                this.openInBrowser(this.urlArr[index])
              })
          }
        })
      }
    }
    .padding(20)
  }
}

读者可以在手机中尝试，点击url之后会跳转到浏览器中打开。如果需要跳转到其他应用当中，需要参考startAbility文档，更改want的入参。