请问如何用 js 解析文本形式的 html 文件啊?

2016-06-01 10:40:45 +08:00
 xudd
哎呀,发现刚刚的提问放错地方了,刚开始用 V2EX 还有点蒙圈。
正题:因为硬件条件限制,不能使用 java 写个解析页面的服务,也不能用页面嵌入 iframe 的方式,只能用 js 去解析几千行的 html 文件,求大神指导如何实现?
3549 次点击
所在节点    问与答
6 条回复
YuJianrong
2016-06-01 11:38:47 +08:00
Solution the hard mode:
你可以用 browserify 来在浏览器中加载一个 node 的 html parser ,比如这个 https://github.com/oyyd/htmlparser2-without-node-native
这就可以用 JS parse html. html2 自带一个 dom handler ,所以不仅是 sax 风格的 parser , dom 也可以 parser 出来。
如果你这还觉得麻烦想用 jQuery 风格的 API 来操纵这个 dom tree ,还有 cheerio 这个 module 可选: https://www.npmjs.com/package/cheerio-without-node-native
注:单纯 htmlparser2 打包大约 140K, 加上 cheerio 700 多 K

Solution the easy mode:
如果你们无所谓 XSS 攻击( html 文本里的 js 会执行)的话,大可这样:
var d = document.createElement("div");
d.innerHTML = [youHtmlText]

然后你就可以用 d 的 children 来处理了。
xudd
2016-06-01 14:57:07 +08:00
@YuJianrong 非常感谢, easy mode 不适用,我尝试一下 hard mode 吧,再次感谢!
xudd
2016-06-01 14:58:57 +08:00
@YuJianrong 不过您说的 hard mode 都是在 node 环境下吗?我们没有用 node ,我也还不会用 node ,(尴尬脸;
YuJianrong
2016-06-01 17:29:19 +08:00
@xudd nodejs 环境只是为了用 browserify(node 写的一个工具)造出一个浏览器能用的 JS 包,之后就不再需要 node 环境了。

使用方法非常简单:
1. 下载并安装 nodejs: https://nodejs.org/en/download/
2. 安装 browserify: (如果 npm 被墙请使用 cnpm: https://npm.taobao.org/ )
npm install -g browserify
3. 新建一个文件夹,在文件夹里安装 htmlparser2 依赖:
mkdir tmp
cd tmp
npm install htmlparser2-without-node-native
4. 新建一个文件 main.js, 填入以下内容,为把 htmlparser2 导出去做准备:
window.htmlParser = require("htmlparser2-without-node-native");
5. 用 browserify 打包
browserify main.js -o bundle.js

然后你就得到一个 bundle.js ,引入 html 运行之后, window 上就有一个 htmlParser 的 constructor ,下面就可以按 htmlparser2 的用法在前端使用了。
要用更方便的 cheerio 的方法类似。
xudd
2016-06-01 20:23:45 +08:00
@YuJianrong 问题已经解决了,就用 jquery 就行,非常感谢您的帮助!
YuJianrong
2016-06-01 20:45:36 +08:00
@xudd 呃……所以我一开始就问是不是无所谓 XSS 攻击……

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/282678

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX