html转json

美女程序员鼓励师

json在存储的功能上一直受到很多人的追捧,除此之外由于适用的标点符号数目少,也减少一些不必要的字符使用。鉴于它的这些优点,我们是可以把html转换成json来用的。在正式开始之前,我们需要对json的概念有所了解,然后再进行代码模块的学习,下面我们来看看具体内容。

1.json概念

json(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它起源于JavaScript的数据对象,之后独立成为一种web较为流行的数据交换标准。

json的语法,是非常明显的键值对结构,比较利于理解:

{

  "note":{

        "to":"George",

        "from":"John",

        "heading":"Reminder",

        "body":"Don't forget the meeting!"

        }

}

2.实例

import { Parser } from "htmlparser2"

 

const numberValueRegexp = /^\d+$/

const zeroValueRegexp = /^0[^0\s].*$/

const scriptRegexp = /^script$/i

const styleRegexp = /^style$/i

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

 

const TAG = 'tag'

const TEXT = 'text'

const COMMENT = 'comment'

 

/**

 * 去除前后空格

 */

export const trim = val => {

    return (val || '').replace(/^\s+/, '').replace(/\s+$/, '')

}

/**

 * 首字母大写

 */

export const capitalize = word => {

    return (word || '').replace(/( |^)[a-z]/, c => c.toUpperCase())

}

/**

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

 */

export const camelCase = key => {

    return (key || '').split(/[_-]/).map((item, i) => i === 0 ? item : capitalize(item)).join('')

}

/**

 * 大驼峰命名法,首字母大写

 */

export const pascalCase = key => {

    return (key || '').split(/[_-]/).map(capitalize).join('')

}

export const isPlainObject = obj => {

    return Object.prototype.toString.call(obj) === '[object Object]'

}

/**

 * 行内样式转Object

 */

export const style2Object = (style) => {

    if (!style || typeof style !== 'string') {

        return {}

    }

    const styleObject = {}

    const styles = style.split(/;/)

    styles.forEach(item => {

        const [prop, value] = item.split(/:/)

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

            const val = trim(value)

            styleObject[camelCase(trim(prop))] = zeroValueRegexp.test(val) ? 0 : numberValueRegexp.test(val) ? Number(val) : val

        }

    })

    return styleObject

}

 

export const toJSON = (html, options) => {

    options = Object.assign({ skipStyle: false, skipScript: false, pureClass: false, pureComment: false }, options)

    const json = []

    let levelNodes = []

    const parser = new Parser({

        onopentag: (name, { style, class: classNames, ...attrs } = {}) => {

            let node = {}

            if ((scriptRegexp.test(name) && options.skipScript === true) ||

                (styleRegexp.test(name) && options.skipStyle === true)) {

                node = false

            } else {

                if (options.pureClass === true) {

                    classNames = ''

                }

                node = {

                    type: TAG,

                    tagName: name,

                    style: style2Object(style),

                    inlineStyle: style || '',

                    attrs: { ...attrs },

                    classNames: classNames || '',

                    classList: options.pureClass ? [] : (classNames || '').split(/\s+/).map(trim).filter(Boolean),

                    children: []

 

                }

            }

            if (levelNodes[0]) {

                if (node !== false) {

                    const parent = levelNodes[0]

                    parent.children.push(node)

                }

                levelNodes.unshift(node)

            } else {

                if (node !== false) {

                    json.push(node)

                }

                levelNodes.push(node)

            }

        },

        ontext(text) {

            const parent = levelNodes[0]

            if (parent === false) {

                return

            }

            const node = {

                type: TEXT,

                content: text

            }

            if (!parent) {

                json.push(node)

            } else {

                if (!parent.children) {

                    parent.children = []

                }

                parent.children.push(node)

            }

        },

        oncomment(comments) {

            if (options.pureComment) {

                return

            }

            const parent = levelNodes[0]

            if (parent === false) {

                return

            }

            const node = {

                type: COMMENT,

                content: comments

            }

            if (!parent) {

                json.push(node)

            } else {

                if (!parent.children) {

                    parent.children = []

                }

                parent.children.push(node)

            }

        },

        onclosetag() {

            levelNodes.shift()

        },

        onend() {

            levelNodes = null

        }

    })

    parser.done(html)

    return json

}

const setAttrs = (attrs, results) => {

    Object.keys(attrs || {}).forEach(k => {

        if (!attrs[k]) {

            results.push(k)

        } else {

            results.push(' ', k, '=', '"', attrs[k], '"')

        }

    })

}

const toElement = (elementInfo, results) => {

 

    switch (elementInfo.type) {

        case TAG:

            const tagName = elementInfo.tagName

            results.push('<', tagName)

            if (elementInfo.inlineStyle) {

                results.push(' style="', elementInfo.inlineStyle, '"')

            }

            if (elementInfo.classNames) {

                results.push(' class="', elementInfo.classNames, '"')

            }

            setAttrs(elementInfo.attrs, results)

            if (selfCloseTagRegexp.test(tagName)) {

                results.push(' />')

            } else {

                results.push('>')

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

                    elementInfo.children.forEach(item => toElement(item, results))

                }

                results.push('</', tagName, '>')

            }

            break;

        case TEXT:

            results.push(elementInfo.content)

            break;

        case COMMENT:

            results.push("<!-- ", elementInfo.content, " -->")

            break;

        default:

        // ignore

    }

}

export const toHTML = json => {

    json = json || []

    if (isPlainObject(json)) {

        json = [json]

    }

    const results = []

    json.forEach(item => toElement(item, results))

    return results.join('')

}

以上就是html转json的方法,其实json转html也同样适用,相当于本篇文章学习了两种转换的方法,看懂的小伙伴可以动手尝试了。

以上是 html转json 的全部内容, 来源链接: utcz.com/z/542215.html

回到顶部