鸿蒙 Web组件的智能分词

梦想不只是梦与想

1136人浏览 · 2026-02-19 06:45:00

梦想不只是梦与想 · 2026-02-19 06:45:00 发布

本文同步发表于我的微信公众号，微信搜索程语新视界即可关注，每个工作日都有文章更新

一、智能分词能力

智能分词是 ArkWeb 组件提供的一种 H5 页面内文本实体识别功能，能够自动识别页面中的特殊信息（如电话号码、网址、邮箱等），并通过高亮显示和快捷操作菜单，让用户可以直接与这些实体进行交互。

核心功能

功能	描述	适用版本
文本分词高亮	自动识别并高亮标注页面内的特殊实体	API 20+
分词长按预览	长按实体弹出预览菜单，提供快捷操作	API 20+
文本选择菜单扩展	选中文本时显示 AI 菜单选项	API 22+

可识别的实体类型

类型	示例	对应操作
电话	400-123-4567	拨打电话
网址	https://www.example.com	打开链接
邮箱	test@example.com	发送邮件
地址	北京市海淀区中关村	地图查看
时间	2025.06.01	添加日历

二、启用智能分词功能

启用智能分词功能需要设置两个关键属性：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  webController: webview.WebviewController = new webview.WebviewController();
  
  build() {
    Column() {
      Web({
        src: $rawfile('index.html'),
        controller: this.webController
      })
      .enableDataDetector(true)           // 开启智能分词功能
      .dataDetectorConfig({                // 配置识别参数
        types: [],                         // 实体识别类型，为空则识别所有类型
        enablePreviewMenu: false            // 是否启用长按预览
      })
    }
    .height('100%')
    .width('100%')
  }
}

参数说明

参数	类型	必填	说明
enableDataDetector	boolean	是	是否开启智能分词功能，默认为 false
dataDetectorConfig.types	Array	否	指定识别的实体类型，为空时识别所有类型
dataDetectorConfig.enablePreviewMenu	boolean	否	是否启用分词长按预览功能

三、文本分词高亮

当 Web 组件加载的 H5 页面完成后，系统会自动扫描页面文本内容，识别出符合规则的特殊实体，并进行高亮标注。高亮后的实体将转变为超链接形式，用户点击后会弹出相应的操作菜单。

高亮过滤规则

并非所有文本都会被识别和高亮，以下情况会被过滤：

规则	说明	示例
输入框/可编辑区域	不处理输入框内的文本	`<input value="400-123-4567">`
超链接标签内	不处理 `<a>` 标签内的文本	`<a>400-123-4567</a>`
跨域 iframe	不处理跨域 iframe 内的内容	`<iframe src="其他域名">`
嵌套 iframe	两层及以上嵌套的 iframe	iframe 嵌套超过两层
跨节点实体	被多个标签分割的实体	`<p>星<span>期六</span></p>`

3.3 示例

HTML 文件（index.html）

<!DOCTYPE html>
<html>
<head>
    <title>智能分词测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h2>可识别的实体示例：</h2>
    <p>电话：400-123-4567</p>
    <p>邮箱：test@example.com</p>
    <p>网址：https://www.example.com/</p>
    <p>日期：2025.06.01</p>
    <p>地址：北京市海淀区中关村</p>
    
    <h2>不会高亮的示例：</h2>
    <p>不会高亮的星<span>期六</span>（跨节点）</p>
    <input value="400-123-4567" placeholder="输入框内的不会高亮">
    <a href="https://www.example.com">超链接内的不会高亮</a>
</body>
</html>

ETS 文件

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct DataDetectorDemo {
  webController: webview.WebviewController = new webview.WebviewController();
  
  build() {
    Column() {
      Row() {
        Button('刷新页面')
          .onClick(() => {
            this.webController.refresh();
          })
      }
      .width('100%')
      .padding(10)
      
      Web({
        src: $rawfile('index.html'),
        controller: this.webController
      })
      .enableDataDetector(true)
      .dataDetectorConfig({
        types: [],  // 识别所有类型
        enablePreviewMenu: false
      })
    }
    .height('100%')
    .width('100%')
  }
}

3.4 交互行为

操作	行为	说明
点击实体	弹出操作菜单	根据实体类型显示不同菜单项
右键点击	超链接默认行为	触发浏览器默认右键菜单
鼠标拖拽	超链接默认行为	可拖拽链接
长按实体	取决配置	根据 enablePreviewMenu 设置

3.5 特殊场景处理

当页面文本元素设置了 user-select:none 样式时：

.no-select {
  user-select: none;  /* 不可选中 */
}

选择文本：菜单中的"选择文本"选项将无效
复制文本：如果 copyOptions 不为 CopyOptions.None，仍可复制实体文本

Web({ src: $rawfile('index.html'), controller: this.controller })
  .enableDataDetector(true)
  .copyOptions(CopyOptions.LocalDevice)  // 允许复制
  .dataDetectorConfig({
    types: [],
    enablePreviewMenu: false
  })

四、分词长按预览

分词长按预览是智能分词的高级功能，用户在长按已高亮的实体文本时，会弹出预览菜单，提供更丰富的操作选项。

配置方法

Web({
  src: $rawfile('index.html'),
  controller: this.webController
})
.enableDataDetector(true)
.dataDetectorConfig({
  enablePreviewMenu: true,  // 开启长按预览
  types: []                  // 识别所有类型
})

4.3 预览效果

开启长按预览后，当用户长按被高亮的实体文本时，会弹出预览菜单：

电话号码：显示号码，提供"呼叫"选项
网址：显示链接，提供"打开"选项
邮箱：显示地址，提供"发送邮件"选项
地址：显示位置，提供"查看地图"选项
日期：显示日期，提供"添加日历"选项

注意：通过 bindSelectionMenu 绑定的自定义菜单与分词长按预览菜单互不影响。

// 自定义菜单（针对普通元素）
.bindSelectionMenu(WebElementType.IMAGE, this.ImageMenuBuilder, WebResponseType.LONG_PRESS)

// 分词长按预览（针对高亮实体）
.dataDetectorConfig({
  enablePreviewMenu: true
})

// 两者互不影响：
// - 长按被高亮的分词超链接 → 弹出分词预览菜单
// - 长按普通超链接 → 弹出自定义菜单（如果配置了）

五、文本选择菜单扩展（API 22+）

从 API version 22 开始，ArkWeb 支持通过 enableSelectedDataDetector 单独配置文本选择 AI 菜单的启用情况。当用户在非编辑区域选中文本时，如果满足特定条件，文本选择菜单会展示对应的 AI 菜单选项。

启用配置

Web({
  src: $rawfile('index.html'),
  controller: this.webController
})
.enableDataDetector(true)
.enableSelectedDataDetector(true)  // API 22+，单独启用文本选择AI菜单
.dataDetectorConfig({
  types: [TextDataDetectorType.PHONE, TextDataDetectorType.URL, TextDataDetectorType.EMAIL],
  enablePreviewMenu: true
})

显示条件

文本选择 AI 菜单仅在同时满足以下条件时显示：

条件	说明	示例
区域限制	非编辑区域	不在 input、textarea 内
长度限制	UTF-8 编码后 ≤ 255 字节	中文约 85 字以内
实体数量	仅包含一个匹配的实体词	选中文本只能包含一个实体
操作状态	不是"全选"操作	用户手动选择的文本

工作流程

用户选中文本
    ↓
检查是否满足条件
  ├─ 编辑区域？ → 是 → 不显示AI菜单
  ├─ 长度＞255字节？ → 是 → 不显示AI菜单  
  ├─ 包含多个实体？ → 是 → 不显示AI菜单
  ├─ 全选操作？ → 是 → 不显示AI菜单
  ↓
显示AI菜单选项
    ↓
用户点击AI菜单项
    ↓
执行对应操作（拨号/打开链接/发送邮件等）

备注：AI 菜单项的出现与是否选中高亮的实体文本无关。即使选中的文本原本没有被高亮（例如在不可高亮的区域），只要满足上述条件，AI 菜单项就会显示。

功能对比

功能	API版本	配置项	触发方式	特点
文本分词高亮	20+	enableDataDetector	页面加载后自动	自动识别并高亮
分词长按预览	20+	enablePreviewMenu	长按高亮实体	提供预览和快捷操作
文本选择AI菜单	22+	enableSelectedDataDetector	选中文本	与高亮无关，需满足条件