`;\n let res = octoparse.htmlParse(htmlStr)\n```\n\n\n### 在vue中以插件方式使用\n\n```html\n import Vue from 'vue'\n import octoparse from 'octoparse'\n Vue.use(octoparse)\n \n let htmlStr = \n `
\n
test
\n \n
`;\n let res = Vue.$htmlParse(htmlStr)\n```\n### 在小程序中使用\n1、在小程序模板中引入octoparse模板\n\n* 此处的data的key需要为nodes以便和octoparse小程序模板的入口模板保持一致\n* 此处的例子为微信小程序，支付宝小程序的使用方式基本相同，注意引用的模板为platform/alipay/index.axml\n```html\n \n\n \n\n```\n2、 在page中挂载数据\n```html\n import octoparse from 'octoparse'\n \n Page({\n ...\n onLoad: function(){\n let htmlStr = \n `
\n
test
\n \n
`;\n let res = octoparse.htmlParse(htmlStr)\n \n this.setData({\n htmlData: res \n })\n }\n ...\n })\n\n```\n### 在Megola中使用\n\n[Megola 基于Vue的跨平台小程序开发框架](https://github.com/kaola-fed/megalo)\n\n1、在webpack中配置挂载小程序模板\n```html\n module.exports = {\n ...\n target: createMegaloTarget( {\n compiler: Object.assign( compiler, {}),\n platform: 'wechat',\n htmlParse: {\n templateName: 'octoParse',\n src: resolve('node_modules/octoparse/lib/platform/wechat')\n }\n }),\n ...\n }\n\n```\n2、在vue上挂载octoparse\n```html\n import Vue from 'vue'\n import octoparse from 'octoparse'\n Vue.use(octoparse)\n```\n3、在页面中使用\n```html\n
\n
\n \n data(){\n return {\n vhtml:`
test
`\n }\n }\n```\n\n### 基本使用\n\n将html转换为树结构\n\n```html\n let htmlStr = \n `
\n
test
\n \n
`;\n let res = octoparse.htmlParse(htmlStr)\n\n```\n\n### 节点预处理\n\n使用visitors方法对解析的html节点进行处理。\n\n例如：为所有的img图片加上display:block样式去除连续图片中间的缝隙\n\n```html\n let options = {\n visitors: {\n img(node){\n node.styleStr = 'display:block';\n }\n }\n }\n let htmlStr = \n `\n `;\n let res = octoparse.htmlParse(htmlStr, options)\n```\n#### 节点属性释义\n\n| 属性名 | 含义 | 注释 |\n| ------ | ------ | ------ |\n| node | 节点类型 | |\n| tag | 节点标签名 | |\n| index | 节点在节点树中的序列号 | |\n| attr | 属性键值对 | |\n| classStr | class字符串 | 在模板中使用该属性使class生效|\n| styleStr | style字符串 | 在模板中使用该属性使style生效 |\n| nodes | 子节点数组 | |\n\n\n参考： [访问者模式](https://zh.wikipedia.org/wiki/%E8%AE%BF%E9%97%AE%E8%80%85%E6%A8%A1%E5%BC%8F)\n\n\n### 使用插件\n\n支持插件，例如：\n\n```html\n import removeBackground from '../../lib/plugins/removeBackground';\n let options = {\n plugins: [removeBackground],\n }\n let htmlStr = \n `
\n
test
\n \n
`;\n let res = octoparse.htmlParse(htmlStr, options)\n```\n\n### 本地开发\n\n* git clone https://github.com/kaola-fed/octoparse.git\n* cd octoparse\n* npm i\n* npm install gulp -g (安装一下gulp)\n* npm run build\n* gulp (因为小程序不允许引用根目录以外的文件，所以这里跑一下gulp任务将模板拷贝到小程序demo的目录下面)\n\n\n\n## 灵感来源\n\n名字来源于游戏 `octopath tarveler`。项目启发自 `wxParse`。\n\n
![\"test\"](\"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3492149706,1549268323&fm=26&gp=0.jpg\" "\\"girl\\"")
\n ![](\"https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=4cadfc03b88f8c54f7decd7d5b404690/b219ebc4b74543a961dac02112178a82b801141d.jpg\")