更新记录

1.0.0（2025-04-19）下载此版本

初始版本。

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 4.55，Android：支持，iOS：支持，HarmonyNext：不确定	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

kux-htmlparser

专为现代跨平台开发设计的轻量级高性能HTML解析器，特别针对UTS环境优化定制

核心特性

🔥 跨平台支持

完美运行于浏览器/安卓/IOS/小程序环境

🚀 极致性能

基于正则的快速解析引擎，处理速度比传统解析器快3-5倍

📦 零依赖

完全自主实现，无第三方依赖

✨ 智能处理

自动闭合标签智能推断
符合HTML5规范的嵌套规则
特殊标签内容解析（script/style/textarea等）
自定义嵌套规则

📡 事件驱动API

export type Handler = {
    start ?: (tagName : string, attrs : Attr[], unary : boolean, content ?: string) => void;
    end ?: (tagName : string) => void;
    chars ?: (text : string) => void;
    comment ?: (text : string) => void;
}

快速开始

基础用法

import { Handler, useParser } from '@/uni_modules/kux-htmlparser';

const handler: Handler = {
    start: (tag, attrs, unary, content) => {
        console.log(`Start <${tag}>, Attrs: ${JSON.stringify(attrs)}, Unary: ${unary}, Content: ${content}`);
    },
    end: (tag) => console.log(`End </${tag}>`),
    chars: (text) => console.log(`Text: ${text}`),
    comment: (text) => console.log(`Comment: ${text}`)
};
const html = `
<html>
    <body>
        <!-- Test Comment -->
        <h1>Hello</h1>
        <code>const a = 123;</code>
        <img src="image.jpg" alt="test" />
    </body>
</html>`;
useParser(html, handler).parse();

复杂场景示例

// 构建DOM树
class Node {
    tagName: string
    attributes: UTSJSONObject = {}
    children: Node[] = []

    constructor (tagName: string) {
        this.tagName = tagName;
    }
}
const root = new Node('root');
const stack = [root];
const nodeHandler: Handler = {
    start: (tag, attrs, unary, content) => {
        const node = new Node(tag);
        attrs.forEach((attr) => {
            node.attributes[attr.name] = attr.value;
        });

        const parent = stack[stack.length - 1];
        parent.children.push(node);

        if (!unary) stack.push(node);
    },
    end: (tagName) => {
        stack.pop();
    }
};
useParser(html, nodeHandler).parse();
console.log(root);

进阶功能

1.自定义嵌套规则

import { HTMLParser, ParserConfig } from '@uni_modules/kux-htmlparser';

HTMLParser.configure({
  blockElements: new Set(['my-custom-block']),
  inlineElements: new Set(['inline-component'])
} as ParserConfig)

2.解析性能监控

目前下面的监控方法安卓和IOS不可用

const parser = new HTMLParser(htmlContent, handler)
console.time('parse')
parser.parse()
console.timeEnd('parse') // 输出: parse: 1.925048828125 ms

注意事项

1. 输入规范

确保输入HTML片段符合XML规范（标签必须正确闭合）

2. 性能优化

避免在start/end回调中执行重逻辑
大数据量建议分片解析

3. 特殊标签

script/style等标签内容会通过chars事件完整传递

接口定义

/**
 * interface.uts
 * uts插件接口定义文件，按规范定义接口文件可以在HBuilderX中更好的做到语法提示
 */

export type Handler = {
    /**
     * 开始标签处理监听
     */
    start ?: (tagName : string, attrs : Attr[], unary : boolean, content ?: string) => void;
    /**
     * 结束标签处理监听
     */
    end ?: (tagName : string) => void;
    /**
     * 字符内容处理监听
     */
    chars ?: (text : string) => void;
    /**
     * 注释内容处理监听
     */
    comment ?: (text : string) => void;
}

export type Attr = {
    name: string;
    value: string;
}

export type ParserConfig = {
    /**
     * 块元素
     */
    blockElements?: Set<string>;
    /**
     * 行内元素
     */
    inlineElements?: Set<string>;
    /**
     * 自闭合元素
     */
    closeSelfElements?: Set<string>;
    /**
     * 特殊元素
     */
    specialElements?: Set<string>;
    /**
     * 空元素
     */
    emptyElements?: Set<string>;
}

export interface IHTMLParser {
    parse(): void;
    configure(newConfig: ParserConfig): IHTMLParser;
}

结语

kux 不生产代码，只做代码的搬运工，致力于提供uts 的 js 生态轮子实现，欢迎各位大佬在插件市场搜索使用 kux 生态插件：https://ext.dcloud.net.cn/search?q=kux

友情推荐

TMUI4.0：包含了核心的uts插件基类.和uvue组件库
GVIM即时通讯模版：GVIM即时通讯模版，基于uni-app x开发的一款即时通讯模版
t-uvue-ui：T-UVUE-UI是基于UNI-APP X开发的前端UI框架
UxFrame 低代码高性能UI框架：【F2图表、双滑块slider、炫酷效果tabbar、拖拽排序、日历拖拽选择、签名...】UniAppX 高质量UI库
wx-ui 基于uni-app x开发的高性能混合UI库：基于uni-app x开发的高性能混合UI库，集成 uts api 和 uts component，提供了一套完整、高效且易于使用的UI组件和API，让您以更少的时间成本，轻松完成高性能应用开发。
firstui-uvue：FirstUI（unix）组件库，一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。
easyXUI 不仅仅是UI 更是为UniApp X设计的电商模板库：easyX 不仅仅是UI库，更是一个轻量、可定制的UniAPP X电商业务模板库，可作为官方组件库的补充,始终坚持简单好用、易上手

kux-htmlparser kux-htmlparser parser HTML解析

更新记录

1.0.0（2025-04-19）下载此版本

平台兼容性

kux-htmlparser

核心特性

快速开始

基础用法

复杂场景示例

进阶功能

1.自定义嵌套规则

2.解析性能监控

注意事项

接口定义

结语

kux 不生产代码，只做代码的搬运工，致力于提供uts 的 js 生态轮子实现，欢迎各位大佬在插件市场搜索使用 kux 生态插件：https://ext.dcloud.net.cn/search?q=kux

友情推荐

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

KuxCopilot：AI代码助手

kux-easy-pack-hxp 方便快捷高效离线打包插件

kux-mlkit-scancode

kux-audio-player 简单高效音频播放插件

markdown预览插件，默认Github风格

kux-htmlparser kux-htmlparser parser HTML解析

更新记录

1.0.0（2025-04-19） 下载此版本

平台兼容性

kux-htmlparser

核心特性

快速开始

基础用法

复杂场景示例

进阶功能

1.自定义嵌套规则

2.解析性能监控

注意事项

接口定义

结语

kux 不生产代码，只做代码的搬运工，致力于提供uts 的 js 生态轮子实现，欢迎各位大佬在插件市场搜索使用 kux 生态插件：https://ext.dcloud.net.cn/search?q=kux

友情推荐

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

KuxCopilot：AI代码助手

kux-easy-pack-hxp 方便快捷高效离线打包插件

kux-mlkit-scancode

kux-audio-player 简单高效音频播放插件

markdown预览插件，默认Github风格

Modal title

1.0.0（2025-04-19）下载此版本