From e2a0a6543222e45dcd0b5720738fc54062d7fe96 Mon Sep 17 00:00:00 2001 From: uaison Date: Sun, 11 Feb 2018 16:55:47 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E5=B0=8F=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=E7=89=88=E6=9C=AC=E9=80=82=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 62 +++++++++++++++++++++++++----------------- src/parser/index.js | 4 +-- src/parser/nodes.js | 25 ++++++++++------- src/tokenizer/types.js | 2 +- 4 files changed, 55 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index c366829..45fe062 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,16 @@ # html-parser Simple HTML to JSON parser use Regexp and String.indexOf +## Update +微信建议nodes属性绑定数组，所以返回htmlParse(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..." // 文本节点内容 +``` + ## Install ```shell @@ -18,47 +28,49 @@ htmlParser(html) ### 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 = {} From d601ac5f93ae38f1810b3fb731fba7a026ffd899 Mon Sep 17 00:00:00 2001 From: uaison Date: Sun, 11 Feb 2018 16:59:19 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E5=B0=8F=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=E7=89=88=E6=9C=AC1.7.2=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 45fe062..6cdd377 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,9 @@ Simple HTML to JSON parser use Regexp and String.indexOf ## Update -微信建议nodes属性绑定数组，所以返回htmlParse(html)返回值改成数组 +微信建议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" From 0c4f717e323be129ffb99befd1fee736a2954889 Mon Sep 17 00:00:00 2001 From: uaison Date: Sun, 11 Feb 2018 17:10:22 +0800 Subject: [PATCH 3/4] =?UTF-8?q?usage=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6cdd377..ba8f4ae 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,19 @@ npm install htmlstr-parser ## 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 + ``` ### Output ```javascript From bccaf18bfee1a5ae3d0c652fd864f586903a3f01 Mon Sep 17 00:00:00 2001 From: uaison Date: Sun, 11 Feb 2018 17:17:26 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ba8f4ae..08f5e28 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,7 @@ Simple HTML to JSON parser use Regexp and String.indexOf ## Update 微信建议nodes属性绑定数组，所以htmlParse(html)返回值改成数组 -旧版本输出属性名根据微信文档改变： -微信文档地址： https://mp.weixin.qq.com/debug/wxadoc/dev/component/rich-text.html +旧版本输出属性名根据微信文档改变,微信文档地址： https://mp.weixin.qq.com/debug/wxadoc/dev/component/rich-text.html ``` "tag":"root" => "name": "div" "type": "Element" || "Text" => type: "node" || "text" @@ -12,12 +11,6 @@ Simple HTML to JSON parser use Regexp and String.indexOf "content": "content..." => "text": "text..." // 文本节点内容 ``` -## Install - -```shell -npm install htmlstr-parser - -``` ## Basic usage ```javascript @@ -32,6 +25,7 @@ this.setData({ }) ``` +wxml: ```wxml ```