V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xudd
V2EX  ›  问与答

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

  •  
  •   xudd · 2016-06-01 10:40:45 +08:00 · 3388 次点击
    这是一个创建于 2879 天前的主题,其中的信息可能已经有所发展或是发生改变。
    哎呀,发现刚刚的提问放错地方了,刚开始用 V2EX 还有点蒙圈。
    正题:因为硬件条件限制,不能使用 java 写个解析页面的服务,也不能用页面嵌入 iframe 的方式,只能用 js 去解析几千行的 html 文件,求大神指导如何实现?
    6 条回复    2016-06-01 20:45:36 +08:00
    YuJianrong
        1
    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
        2
    xudd  
    OP
       2016-06-01 14:57:07 +08:00
    @YuJianrong 非常感谢, easy mode 不适用,我尝试一下 hard mode 吧,再次感谢!
    xudd
        3
    xudd  
    OP
       2016-06-01 14:58:57 +08:00
    @YuJianrong 不过您说的 hard mode 都是在 node 环境下吗?我们没有用 node ,我也还不会用 node ,(尴尬脸;
    YuJianrong
        4
    YuJianrong  
       2016-06-01 17:29:19 +08:00   ❤️ 1
    @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
        5
    xudd  
    OP
       2016-06-01 20:23:45 +08:00
    @YuJianrong 问题已经解决了,就用 jquery 就行,非常感谢您的帮助!
    YuJianrong
        6
    YuJianrong  
       2016-06-01 20:45:36 +08:00
    @xudd 呃……所以我一开始就问是不是无所谓 XSS 攻击……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2538 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:21 · PVG 09:21 · LAX 18:21 · JFK 21:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.