HarmonyOS 鸿蒙Next 如何识别Text组件中文本内容里的超链接

HarmonyOS 鸿蒙Next 如何识别Text组件中文本内容里的超链接

有一段文本，放在Text组件中。需要识别其中的超链接，给其变色，并添加点击事件。
示例文本：“这是一个超链接（https://www.baidu.com），请找出来，还有另外一个http://www.baidu.com，请找出来”


更多关于HarmonyOS 鸿蒙Next 如何识别Text组件中文本内容里的超链接的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
使用正则表达式将超链接从整个字符串分割出来，请参考以下代码： 
import { promptAction } from '[@kit](/user/kit).ArkUI';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) strArr: Array<string> = []
  [@State](/user/State) urlArr: Array<string> = []

  aboutToAppear(): void {
    // 示例字符串
    let text = "这是一个网址：https://www.example.com 还有一个网址：http://www.example.org";
    this.splitUrls(text)
  }

  splitUrls(str: string) {
    let urlPattern = /(https?:\/\/|www\.)[a-zA-Z_0-9\-@]+(\.\w[a-zA-Z_0-9\-:]+)+(\/[\(\)~#&amp;\-=?\+\%/\.\w]+)?/g;
    let urlsArr = str.match(urlPattern) as Array<string>

    if (urlsArr && urlsArr.length > 0) {
      this.strArr = this.splitString(str, urlsArr)
      this.urlArr = urlsArr
    }
  }

  splitString(str: string, separators: Array<string>) {
    return str.split(new RegExp(separators.join('|'), 'g'));
  }

  build() {
    Column() {
      Text() {
        ForEach(this.strArr, (str: string, index: number) => {
          Span(str)

          if (this.urlArr.length > index) {
            Span(this.urlArr[index])
              .fontColor(Color.Blue)
              .onClick(() => {
                promptAction.showToast({ message: '点击网址' })
              })
          }
        },)
      }
      .fontSize(30)
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 如何识别Text组件中文本内容里的超链接的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，识别Text组件中文本内容里的超链接可以通过以下方式实现：

  1. 动态检索特殊字符串：

    • 数据量较小时，可以在展示时动态检索文本中的特殊字符串（如网址、邮箱等），使用正则表达式进行匹配，并对匹配到的字符串做标记。
    • 根据标记的类型（如网址、电话等），实现相应的跳转逻辑，如加载网页或拨号。

  2. 自定义Span类型：

    • 定义一个枚举类型（如CustomSpanType），包含普通文本、超链接等类型。
    • 创建一个CustomSpan数据类，用于表示不同类型的Span对象，包括文本内容和跳转链接。
    • 在Text组件中使用ForEach遍历CustomSpan对象，根据类型生成不同样式和功能的Span组件。
    • 对于超链接类型的Span，可以使用TextLinkSpan组件，并为其设置点击事件，实现跳转功能。

以上方法可以帮助HarmonyOS 鸿蒙Next识别Text组件中的超链接。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部