最小的html解释器,HTMLParser HTML 文本解析器

更新记录

1.0.0(2021-02-10)

升级为 uni_modules 版本

平台兼容性

app

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

3.1.0 app-vue app-nvue

√

√

√

√

√

√

h5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

IE

Edge

Firefox

pc-Safari

√

√

√

√

√

√

√

√

√

HTML 文本解析器

用于解析请求网络地址得到的text文本，通过HTML的DOM方式获取节点字符数据。

DOM操作属性说明：

首先将请求获取得到的HTML文本text字符串，通过new HTMLParser(text)实例化为DOM操作对象。

后通DOM操作属性获取节点的HTML文本字符信息。

属性名

返回类型

默认值

说明

Array

-

对拥有指定 id 的第一个对象的引用

使用方式：

在 script 中引用html-parser.js文件即可

import HTMLParser from "@/uni_modules/html-parser/js_sdk/html-parser.js"

用法：

有些地址需要跨域才能访问

mounted() {

// 触发请求数据

this.parserData().then(res => {

console.log(res);

});

},

methods: {

// 异步等待解析数据

async parserData() {

const jsonData = {};

// 请求数据

const [error, res] = await uni.request({

url: 'https://ext.dcloud.net.cn/'

});

// 成功返回

if (res) {

// 数据存放

const pluginList = [];

// 获取HTML文本转DOM操作

const doc = new HTMLParser(res.data.toString().trim());

// 选取插件列表内层的HTML文本

const pluginListText = doc.getElementsByClassName('plugin-list')[0];

// 获取插件列表数据转DOM操作

const pluginArrayDoc = new HTMLParser(pluginListText).getElementsByTagName('li');

// 遍历每个插件对象

for (let plugin of pluginArrayDoc) {

// 插件对象

let pluginObject = {};

// 插件对象HTML文本转DOM操作

let pluginDoc = new HTMLParser(plugin);

// 获取插件标题转DOM操作

let pluginTitleText = pluginDoc.getElementsByClassName('extend-title')[0].trim();

let pluginTitleDoc = new HTMLParser(pluginTitleText);

pluginObject.title = pluginTitleDoc.getElementsByTagName('A')[0].trim();

// 获取插件下载次数转DOM操作

let className = 'download';

if (pluginDoc.getElementsByClassName('buy').length) className = 'buy';

let numText = pluginDoc.getElementsByClassName(className)[0]['innerHTML'].trim();

let numTextDoc = new HTMLParser(numText);

let numTextNum = numTextDoc.getElementsByTagName("A")[0]['innerHTML'].trim();

pluginObject.num = numTextNum.substr(numTextNum.lastIndexOf(';') + 1);

// 存入数据

pluginList.push(pluginObject);

pluginObject = {};

}

// 返回数据

jsonData.errMsg = "请求成功"

jsonData.data = pluginList;

}

// 失败返回

if (error) {

jsonData.errMsg = "暂无数据"

jsonData.data = "null";

}

// 返回数据对象

return jsonData

}

}