bytejson互转_JSON和HTML之间互转实现

主要实现功能html转json,再由json恢复html

可去除 style 和 script 标签

将行内样式转换为 js object

将 class 转换为数组形式

主要依赖于 htmlparser2 ; 这是一个性能优越、功能强大的 html 解析库

直接上代码

import { Parser } from "htmlparser2"

const numberValueRegexp &＃61; /^\d&＃43;$/

const zeroValueRegexp &＃61; /^0[^0\s].*$/

const scriptRegexp &＃61; /^script$/i

const styleRegexp &＃61; /^style$/i

const selfCloseTagRegexp &＃61; /^(meta|base|br|img|input|col|frame|link|area|param|embed|keygen|source)$/i

const TAG &＃61; &＃39;tag&＃39;

const TEXT &＃61; &＃39;text&＃39;

const COMMENT &＃61; &＃39;comment&＃39;

/**

* 去除前后空格

*/

export const trim &＃61; val &＃61;> {

return (val || &＃39;&＃39;).replace(/^\s&＃43;/, &＃39;&＃39;).replace(/\s&＃43;$/, &＃39;&＃39;)

}

/**

* 首字母大写

*/

export const capitalize &＃61; word &＃61;> {

return (word || &＃39;&＃39;).replace(/( |^)[a-z]/, c &＃61;> c.toUpperCase())

}

/**

* 驼峰命名法/小驼峰命名法, 首字母小写

*/

export const camelCase &＃61; key &＃61;> {

return (key || &＃39;&＃39;).split(/[_-]/).map((item, i) &＃61;> i &＃61;&＃61;&＃61; 0 ? item : capitalize(item)).join(&＃39;&＃39;)

}

/**

* 大驼峰命名法&＃xff0c;首字母大写

*/

export const pascalCase &＃61; key &＃61;> {

return (key || &＃39;&＃39;).split(/[_-]/).map(capitalize).join(&＃39;&＃39;)

}

export const isPlainObject &＃61; obj &＃61;> {

return Object.prototype.toString.call(obj) &＃61;&＃61;&＃61; &＃39;[object Object]&＃39;

}

/**

* 行内样式转Object

*/

export const style2Object &＃61; (style) &＃61;> {

if (!style || typeof style !&＃61;&＃61; &＃39;string&＃39;) {

return {}

}

const styleObject &＃61; {}

const styles &＃61; style.split(/;/)

styles.forEach(item &＃61;> {

const [prop, value] &＃61; item.split(/:/)

if (prop && value && trim(value)) {

const val &＃61; trim(value)

styleObject[camelCase(trim(prop))] &＃61; zeroValueRegexp.test(val) ? 0 : numberValueRegexp.test(val) ? Number(val) : val

}

})

return styleObject

}

export const toJSON &＃61; (html, options) &＃61;> {

options &＃61; Object.assign({ skipStyle: false, skipScript: false, pureClass: false, pureComment: false }, options)

const json &＃61; []

let levelNodes &＃61; []

const parser &＃61; new Parser({

onopentag: (name, { style, class: classNames, ...attrs } &＃61; {}) &＃61;> {

let node &＃61; {}

if ((scriptRegexp.test(name) && options.skipScript &＃61;&＃61;&＃61; true) ||

(styleRegexp.test(name) && options.skipStyle &＃61;&＃61;&＃61; true)) {

node &＃61; false

} else {

if (options.pureClass &＃61;&＃61;&＃61; true) {

classNames &＃61; &＃39;&＃39;

}

node &＃61; {

type: TAG,

tagName: name,

style: style2Object(style),

inlineStyle: style || &＃39;&＃39;,

attrs: { ...attrs },

classNames: classNames || &＃39;&＃39;,

classList: options.pureClass ? [] : (classNames || &＃39;&＃39;).split(/\s&＃43;/).map(trim).filter(Boolean),

children: []

}

}

if (levelNodes[0]) {

if (node !&＃61;&＃61; false) {

const parent &＃61; levelNodes[0]

parent.children.push(node)

}

levelNodes.unshift(node)

} else {

if (node !&＃61;&＃61; false) {

json.push(node)

}

levelNodes.push(node)

}

},

ontext(text) {

const parent &＃61; levelNodes[0]

if (parent &＃61;&＃61;&＃61; false) {

return

}

const node &＃61; {

type: TEXT,

content: text

}

if (!parent) {

json.push(node)

} else {

if (!parent.children) {

parent.children &＃61; []

}

parent.children.push(node)

}

},

oncomment(comments) {

if (options.pureComment) {

return

}

const parent &＃61; levelNodes[0]

if (parent &＃61;&＃61;&＃61; false) {

return

}

const node &＃61; {

type: COMMENT,

content: comments

}

if (!parent) {

json.push(node)

} else {

if (!parent.children) {

parent.children &＃61; []

}

parent.children.push(node)

}

},

onclosetag() {

levelNodes.shift()

},

onend() {

levelNodes &＃61; null

}

})

parser.done(html)

return json

}

const setAttrs &＃61; (attrs, results) &＃61;> {

Object.keys(attrs || {}).forEach(k &＃61;> {

if (!attrs[k]) {

results.push(k)

} else {

results.push(&＃39; &＃39;, k, &＃39;&＃61;&＃39;, &＃39;"&＃39;, attrs[k], &＃39;"&＃39;)

}

})

}

const toElement &＃61; (elementInfo, results) &＃61;> {

switch (elementInfo.type) {

case TAG:

const tagName &＃61; elementInfo.tagName

results.push(&＃39;

if (elementInfo.inlineStyle) {

results.push(&＃39; style&＃61;"&＃39;, elementInfo.inlineStyle, &＃39;"&＃39;)

}

if (elementInfo.classNames) {

results.push(&＃39; class&＃61;"&＃39;, elementInfo.classNames, &＃39;"&＃39;)

}

setAttrs(elementInfo.attrs, results)

if (selfCloseTagRegexp.test(tagName)) {

results.push(&＃39; />&＃39;)

} else {

results.push(&＃39;>&＃39;)

if (Array.isArray(elementInfo.children)) {

elementInfo.children.forEach(item &＃61;> toElement(item, results))

}

results.push(&＃39;&＃39;, tagName, &＃39;>&＃39;)

}

break;

case TEXT:

results.push(elementInfo.content)

break;

case COMMENT:

results.push("")

break;

default:

// ignore

}

}

export const toHTML &＃61; json &＃61;> {

json &＃61; json || []

if (isPlainObject(json)) {

json &＃61; [json]

}

const results &＃61; []

json.forEach(item &＃61;> toElement(item, results))

return results.join(&＃39;&＃39;)

}

示例

const source &＃61; &＃39;

const htmljson &＃61; toJSON(source, { skipScript: true, skipStyle: true, pureClass: true, pureComment: true })

const jsonhtml &＃61; toHTML(htmljson)

console.log(htmljson)

console.log(jsonhtml)

参数说明

skipScript 过滤 script 标签&＃xff0c;默认 false

skipStyle 过滤 style 标签&＃xff0c;默认 false

pureClass 去掉 class 属性&＃xff0c;默认 false

pureComment 去掉注释&＃xff0c;默认 false

备注

htmlparser2 通过 npm i htmlparser2 --save 进行安装即可