diff --git a/README.md b/README.md index c366829..08f5e28 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,80 @@ # html-parser Simple HTML to JSON parser use Regexp and String.indexOf -## Install - -```shell -npm install htmlstr-parser - +## Update +微信建议nodes属性绑定数组,所以htmlParse(html)返回值改成数组 +旧版本输出属性名根据微信文档改变,微信文档地址: https://mp.weixin.qq.com/debug/wxadoc/dev/component/rich-text.html ``` +"tag":"root" => "name": "div" +"type": "Element" || "Text" => type: "node" || "text" +"attributes": {} => attrs: {"class": "parse-*"} // 增加默认class(parse-div,parse-img, parse-a...),可外部修改转换后元素的样式 +"content": "content..." => "text": "text..." // 文本节点内容 +``` + ## Basic usage ```javascript +import htmlParser from "htmlParser" +data: { + nodes: [] +} var html = "
1

2
3

2

" -htmlParser(html) +this.setData({ + nodes: htmlParser(this.data.html) +}) +``` +wxml: +```wxml + ``` ### Output ```javascript -{ - "tag": "root", +[{ + "name": "div", "children": [{ - "type": "Element", - "tagName": "div", - "attributes": { + "type": "node", + "name": "div", + "attrs": { + "class": "parse-div", "style": "height:10rpx;width: 20rpx;" }, "children": [{ - "type": "Text", - "content": "1" + "type": "text", + "text": "1" }, { - "type": "Element", - "tagName": "p", - "attributes": {}, + "type": "node", + "name": "p", + "attrs": {"class": "parse-p"}, "children": [{ - "type": "Text", - "content": "2" + "type": "text", + "text": "2" }, { - "type": "Element", - "tagName": "br" + "type": "node", + "name": "br" }, { - "type": "Element", - "tagName": "a", - "attributes": { + "type": "node", + "name": "a", + "attrs": { + "class": "parse-a", "href": "http://www.baidu.com" }, "children": [{ - "type": "Text", - "content": "3" + "type": "text", + "text": "3" }] }] }, { - "type": "Element", - "tagName": "p", - "attributes": {}, + "type": "node", + "name": "p", + "attrs": {"class": "parse-p"}, "children": [{ - "type": "Text", - "content": "2" + "type": "text", + "text": "2" }] }] }] -} +}] ``` diff --git a/src/parser/index.js b/src/parser/index.js index 7f5cfab..4f66297 100644 --- a/src/parser/index.js +++ b/src/parser/index.js @@ -3,7 +3,7 @@ import { ElEMENT_TYPE, TEXT_TYPE, createNodeFactory } from './nodes' export function parse(tokens) { let root = { - tag: "root", + name: "div", children: [] } let tagArray = [root] @@ -32,5 +32,5 @@ export function parse(tokens) { } } - return root + return tagArray } \ No newline at end of file diff --git a/src/parser/nodes.js b/src/parser/nodes.js index 77969c4..10633f6 100644 --- a/src/parser/nodes.js +++ b/src/parser/nodes.js @@ -1,31 +1,36 @@ import { TagEmpty } from '../tokenizer/types' -export const ElEMENT_TYPE = "Element" -export const TEXT_TYPE = "Text" +export const ElEMENT_TYPE = "node" +export const TEXT_TYPE = "text" function createElement(token){ - const tagName = token.name - const attributes = token.attributes + const name = token.name + const attrs = token.attrs + if(attrs['class']){ + attrs['class'] += ' parse-' + name + } else { + attrs['class'] = ' parse-' + name + } if (token instanceof TagEmpty) { return { type: ElEMENT_TYPE, - tagName, - attributes + name, + attrs } } return { type: ElEMENT_TYPE, - tagName, - attributes, + name, + attrs, children: [] } } function createText(token){ - const content = token.text + const text = token.text return { type: TEXT_TYPE, - content + text } } diff --git a/src/tokenizer/types.js b/src/tokenizer/types.js index b32b900..2c9f4bc 100644 --- a/src/tokenizer/types.js +++ b/src/tokenizer/types.js @@ -4,7 +4,7 @@ import { isFillattrsMaker } from './makers' export class TagStart { constructor(name, tag){ this.name = name - this.attributes = this.getAttributes(tag) + this.attrs = this.getAttributes(tag) } getAttributes(str) { let attrsMap = {}